Adding/Removing Class on Hover

<ul id="my-list">
    <li>
        Am I right?
        <div>
            Yugi....
        </div>             
    </li>
    <li>
        But am I right?!
        <div>
            Yugi...
        </div>            
    </li>

 

ul#my-list div {
    height: 50px;
    background-color: #ddd;
}

ul#my-list li.hover {
    background-color: #ffde8e;
}

 

$("ul#my-list li div").hide();

$("ul#my-list li").on({
    mouseenter : function() {
        $(this).addClass("hover");
    },
    mouseleave : function() {
        $(this).removeClass("hover");
    },
    click      : function() {
        var obj = $(this),
            div = obj.children("div");
        
        if(div.is(":visible")) {
            div.slideUp();
            obj.removeClass("hover");
        } else {
            div.slideDown();
        }
    }
});

 

Leave a Reply

Your email address will not be published. Required fields are marked *