jQuery - Bewegen Sie die Maus funktioniert nicht

Question

mit ein wenig Mühe zu haben .hover()

ich einige Dribbble Schüsse bin Grabbing, die beim Laden der Seite gezogen werden. Und aus irgendeinem Grund möchte eine Klasse per Hover nicht an ihnen arbeiten.

Obwohl es mit einer Standardliste einwandfrei funktioniert.

jsFiddle here

JS:

$("#dribbble li").hover(

function() { 
    $(this).addClass("hover"); 
}, 

function() { 
    $(this).removeClass("hover"); 
}); 

HTML

<div id="dribbble"> 
<ul> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul> 

Answer 1

Verwenden Delegation - ich bin Ihre Elemente zu erraten sind nicht gebunden zu werden, weil es sich in dem dom zu dem Zeitpunkt nicht verfügbar ist verbindlich

$("#dribbble").on({ 
    mouseenter: function() { 
     $(this).addClass("hover"); 
    }, 
    mouseleave:function() { 
     $(this).removeClass("hover"); 
    } 
},'li'); 

Auch musst dich um genauer zu sein mit Ihrem CSS, wenn Sie es Vorrang vor den anderen Arten nehmen wollen

#dribbble li.hover { 
    background-color:aqua; 
} 

FIDDLE

Answer 2

Sie benötigen Event-Handler-Elemente zu befestigen, die bereits existieren. Während Sie li-Elemente erstellen, müssen Sie eine Verbindung zu einem übergeordneten Element herstellen und dann das Element filtern, das Sie benötigen (was eigentlich wünschenswert ist, wenn es richtig ausgeführt wird).

Versuchen:

$("#dribbble").on('mouseenter','li',function() { 
    $(this).addClass("hover"); 
}); 

$("#dribbble").on('mouseleave','li',function() { 
    $(this).removeClass("hover"); 
});