2010-08-02 9 views
6

Ich bin neu in jQuery und ich suche nach einem einfachen Skript (oder vielleicht gibt es eine einfachere Methode) wo, wenn ein Benutzer über ein Element schwebt, ändert sich die css -Eigenschaft eines anderen Elements.jquery hover/change css property help

Zum Beispiel schweben über diesem Bild und „border-bottom“ auf einem anderen Element ändert seine Farbe oder etwas usw. dank

Antwort

6

Was haben Sie bisher versucht?

Hier ist die jQuery documentation on hover. Stellen Sie dem Objekt, über das Sie den Mauszeiger halten möchten, einen Selektor zur Verfügung (und lassen Sie es stehen, wenn Sie keinen dauerhaften Effekt wünschen). Wählen Sie dann in der Funktion des Ereignisses das Objekt aus, das Sie ändern möchten, und aktualisieren Sie seine CSS settings. (Oder, wenn Sie eine Klasse dafür geschrieben haben, update to the new class.)

Wenn Sie Code hinzufügen möchten, den Sie versucht haben zu schreiben (aktualisieren Sie Ihren Beitrag), wäre ich mehr als glücklich, Ihnen dabei zu helfen.

13

verwenden, um die Hover-Eigenschaft

$('#elementA').hover(function(){ 
    $('#elementB').addClass('active'); 
},function(){ 
    $('#elementB').removeClass('active'); 
}); 

dann

+2

... lehren Sie einen Mann zu fischen ... – JasCav

+3

Jetzt hat er sowohl die Dokumentation und ein Beispiel? –

+0

Guter Punkt. (Ich habe nicht versucht, dich zu beleidigen ... Ich mag es einfach, wenn Leute lernen, warum sie tun, was sie tun ... weißt du das?) – JasCav

2

hoffe, das hilft die aktive Klasse in Ihrem CSS-Stil.

<html> 
    <head> 
     <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
     <script> 
      $(document).ready(function(){ 
       $("#test").hover(function() 
       { 
        $("#test2").css("background-color", "blue"); 
       }, function() 
       { 
        $("#test2").css("background-color", "green"); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="test" style="border:solid 1px black;" > 
      Hover Over Me 
     </div> 
     <br /> 
     <div id="test2" style="background-color:green;"> 
      Test2 
     </div> 
    </body> 
</html>