jquery: adding class on to list-items only on mouseover-remove on mouse-out?

Question

hey guys, what's the best way to do that:

i have a list

<ul>
    <li>hello</li>
    <li>good bye</li>
    <li>arrivederci</li>
    <li class="selected">dude</li>
    <li>whatever</li>
</ul>

Initially one item already has a class of .selected applied. When i hover over one of the list-items i want this one to have the .selected class. So every item should only have the class applied when im over, as soon as i leave the item the class get's removed and the next one has the class.

Answer 1

From your description, I think you want this:

$('ul > li').hover(function () {
    $(this).toggleClass('selected').siblings().removeClass('selected');
});

Demo: http://jsfiddle.net/swN5F/

Or, more likely what you want is actually:

$('ul > li').mouseenter(function () {
    $(this).addClass('selected').siblings().removeClass('selected');
});

Demo: http://jsfiddle.net/swN5F/1/ (note that the last-hovered item remains red)

---

Update: version that works with multiple <ul>s, and with up/down arrow keys:

var $activeUl = $('ul:first'); // For keyboard arrows

$('ul > li').mouseenter(function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    $activeUl = $(this).parent();
});

$(document).keydown(function (e) {
    var direction, siblingsSelector;
    if (e.which == 38) { // up
        direction = 'prev';
        siblingsSelector = ':not(:first-child)';
    } else if (e.which == 40) { // down
        direction = 'next';
        siblingsSelector = ':not(:last-child)';
    }
    $activeUl.find('.selected')[direction]().addClass('selected')
        .siblings(siblingsSelector).removeClass('selected');
});

Demo: http://jsfiddle.net/zBjrS/36/

Answer 2

Why don't you use built-in browser feature:

Markup:

<ul class="hoverUl">
    <li>hello</li>
    <li>good bye</li>
    <li>arrivederci</li>
    <li>dude</li>
    <li>whatever</li>
</ul>

CSS:

.hoverUl li { /* normal style */ }
.hoverUl li:hover { /* "selected" style */ }

This is a little bit different than what you asked because nothing will be selected at first, but why something should be selected if the selection is made by hover..

Preview

Answer 3

You can do that, using jQuery's hover:

$("selector_for_your_ul li").hover(
    function() {
        $(this).addClass("selected").siblings("li").removeClass("selected");
    },
    function() {
        $(this).removeClass("selected");
    }
);

Live example

That will switch the "selected" class to the li that the mouse is over, and if the mouse leaves one li and doesn't enter another, it will remove the class (no none of them will have the "selected" class). I think that's what you said you wanted, although it doesn't match up with having one of them already have the "selected" class at the outset.

If you just want to change it when someone mouses over an li but not remove it when the mouse leaves an li without entering another, use mouseenter:

$("selector_for_your_ul li").mouseenter(
    function() {
        $(this).addClass("selected").siblings("li").removeClass("selected");
    }
);

Live example

If you look up the mouseenter event in various references, they'll tell you it's IE-specific. That's true, but it's so useful that jQuery emulates it on other browsers.

Update: You can change the siblings("li") to siblings("li.selected") in the above if you like, e.g.:

$(this).addClass("selected").siblings("li.selected").removeClass("selected");

That may make it slightly more efficient (not trying to remove a class from something that already has it). Here's the first example (with hover) updated to do that; here's the second example (with mouseenter) updated to do that.

---

Off-topic: But depending on which effect you want, you may be able to achieve it with CSS rather than with jQuery and a "selected" class. If you just want the li highlighted when the mouse is actually over it (the hover example above), rather than leaving the last li highlighted (the mouseenter example above), and if you don't need to support IE6, you can do it using the CSS :hover pseudoclass:

selector_for_your_ul li:hover {
    color: red; /* ...or whatever... */
}

Live example But again, that's only if you want the hover effect, and only if you don't need to support IE6 (which only allows :hover on a elements).