jQuery Hover-Funktion funktioniert nicht für alle divs

Question

ich aus Deutschland bin so geduldig mit meinem Englisch: D

i kümmern sich um die Hover-Funktion in jQuery die Hintergrundfarbe einiger divs auf meiner Seite zu ändern. Das Problem ist nicht jedes div, wenn ich darüber schweben.

$(document).ready(function(){ 
    $('#book').hover(function(){ 
    $(this).css('background', '#dfdfdf'); 
    }, function(){ 
    $(this).css('background', '#eee'); 
    }); 
}); 

Das erste Div auf meiner Seite ist absolut in Ordnung. Aber die Sekunden Divs machen nichts, wenn ich darüber schwebe. Was läuft falsch: D

Vielen Dank!

Answer 1

Sie verwenden #book den Hover zuzuweisen.

IDs sind jedoch eindeutig und jQuery berücksichtigt dies. Daher wendet es nur den Ereignishandler auf das erste Element mit ID-Buch an.

Verwenden Sie stattdessen Klassen.

Answer 2

Das liegt daran, dass Sie die IDs Ihrer divs duplizieren. IDs sollen definitionsgemäß eindeutig sein. Versuchen Sie die Zuordnung jeweils eine Klasse von 'Buch' div und Bindung hover wie so:

$('.book').hover(function(){... 

Siehe Spezifikation: http://www.w3.org/TR/html4/struct/global.html#h-7.5.2

Relevante Auszug:

id =Name[ CS]

Dies Attribut weist einem Element einen Namen zu. Dieser Name muss in einem Dokument eindeutig sein.

Answer 3

Sie müssen mehrere DIVs entweder mit verschiedenen IDs (die auf der Seite eindeutig sein sollen) oder nach Klassen referenzieren. ändern, damit Ihre <DIV id='book'-<DIV class='book' und $('#book')-$('.book')