2012-03-23 23 views
0

Ich habe versucht und gescheitert, das funktioniert zu bekommen. Im Grunde versuche ich, es so zu bekommen, dass, wenn du über ein div schwebst, es die Opazität des Geschwisters auf 0.5 ändern sollte, die class="receiver" hat.jQuery auf Hover Opazität

Wenn Sie diese jsFiddle sehen, gibt es 2 divs mit class="outerwrapper", und beide enthalten 2 divs von Klassen hover und receiver. Wenn Sie den Mauszeiger über das div mit der Klasse bewegen, sollte die Deckkraft von auf 0,5 gesetzt werden, aber nur die innerhalb des gleichen div (Outerwrapper).

Jede Hilfe würde sehr geschätzt werden. Danke im Voraus.

Antwort

5

Sie nicht Notwendigkeit jQuery zu verwenden, oder Sie JavaScript, um für diese (obwohl Sie können), ist CSS durchaus in der Lage in den meisten Browsern das gleiche Endergebnis zu erreichen:

.hover:hover + .receiver { 
    opacity: 0.5; 
} 

JS Fiddle demo.

Und auch, sogar mit 'nur' CSS, in modern/kompatibelen Browsern, ist es möglich, verblassen Übergänge zu verwenden (oder, genau genommen, um die Opazität zu überführen):

.receiver { 
    width: 50px; 
    height: 50px; 
    background-color: blue; 
    opacity: 1; 
    -webkit-transition: opacity 1s linear; 
    -o-transition: opacity 1s linear; 
    -ms-transition: opacity 1s linear; 
    -moz-transition: opacity 1s linear; 
    transition: opacity 1s linear; 
} 

.hover:hover + .receiver { 
    opacity: 0.5; 
    -webkit-transition: opacity 1s linear; 
    -o-transition: opacity 1s linear; 
    -ms-transition: opacity 1s linear; 
    -moz-transition: opacity 1s linear; 
    transition: opacity 1s linear; 
} 
​ 

JS Fiddle demo.


  1. Ich wollte auch eine JavaScript/jQuery-Lösung zur Verfügung zu stellen, aber es gibt einige andere bereits gebucht, jetzt, und ich möchte lieber nicht anderer Leute Antworten auf meine (es nur fühlt sich wiederholen wie Plagiat/Kopieren).
+0

Das zusammen mit einigen netten CSS-Übergänge ist Magie! Danke! – jacktheripper

+0

Oh, ich habe nur hinzugefügt, wie Sie kommentiert! =) Und yo Wir sind sehr willkommen, ich bin froh, Ihnen geholfen zu haben! = D –

+0

+1 für die CSS-Lösung! –

3

So etwas würde es tun: http://jsfiddle.net/UzxPJ/3/

$(function(){ 
    $(".hover").hover(
     function(){ 
      $(this).siblings(".receiver").css("opacity", 0.5);  
     }, 
     function(){ 
      $(this).siblings(".receiver").css("opacity", 1); 
     }   
    );    
});​ 

Referenzen

.siblings() - Holen Sie sich die Geschwister eines Elements - http://api.jquery.com/siblings/

.hover() - Fangen Sie die Mouseover/mouseout Ereignisse - http://api.jquery.com/hover/

+0

Große Antwort +1, alltho Ich würde vorschlagen, „.fadeTo (0, 0,5) mit, statt CSS-() edit: ooh und Cache $ (this). , und mit .on ('Hover', Funktion) anstelle von .hover :) – ninja

+1

@ninja Sie können '$ (this)' hier nicht cachen - das sind zwei separate Callbacks – Alnitak

+0

@ninja Einverstanden, es gibt mehrere Möglichkeiten um dasselbe zu erreichen, ich dachte, das wäre das beschreibendste. –

2
$('.hover').hover(function() { 
    $(this).next('.receiver').css('opacity', 0.5); 
}, function() { 
    $(this).next('.receiver').css('opacity', 1.0); 
}); 

http://jsfiddle.net/2K8B2/

(verwenden .siblings oder .nextAll wenn die .receiver nicht unbedingt das nächste Element ist)

0

Dies funktioniert:

​$(document).ready(function() { 
    $('.hover').hover(function() { 
     var $parent = $(this).parent('.outerwrapper'); 
     $parent.find('.receiver').css({ opacity : 0.5 }); 
    }, function() { 
     var $parent = $(this).parent('.outerwrapper'); 
     $parent.find('.receiver').css({ opacity : 1 }); 
    }); 
});​ 
+0

... ist aber unnötig kompliziert. Das Verschieben von Geschwistern ist im DOM sehr effizient - Sie müssen nicht zum übergeordneten Knoten aufsteigen. – Alnitak

+0

Ya das ist die falsche Lösung. Ich habe die .siblings() schon eine bessere Lösung gewählt. –