jQuery - Hover not working

html, jquery

Solution

Use delegation - I'm guessing your elements aren't getting bound because it's they aren't available in the dom at the time of binding

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

Also you'll have to be more specific with your css if you want it to take precedence over the other styles

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

FIDDLE

Problem

Having a little trouble with `.hover()` I'm grabbing some dribbble shots, which are pulled in on page load. And for some reason adding a class via hover doesn't want to work on them. Although it works perfectly fine with a standard list. 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> ```

Original source

Related problems