jquery：仅在鼠标悬停时将类添加到列表项 - 鼠标移出时删除？

Question

嘿伙计们， 最好的方法是什么：

我有一个列表

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

最初一个项目已经应用了 .selected 类。当我将鼠标悬停在其中一个列表项上时，我希望该列表项具有 .selected 类。因此，每个项目都应该只在我结束时应用该类，一旦我离开该项目，该类就会被删除，下一个就有该类。

Answer 1

根据您的描述，我认为您想要这个：

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

演示： http://jsfiddle.net/swN5F/

或者，更有可能你想要的是：

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

演示： http://jsfiddle.net/swN5F/1/ （请注意，最后悬停的项目保持红色）

---

更新：适用于多个

的版本，并使用向上/向下箭头键：

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');
});

演示：http://jsfiddle.net/zBjrS/36/

Answer 2

为什么不使用内置浏览器功能：

标记：

<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 */ }

这与您要求的有点不同，因为一开始不会选择任何内容，但是如果通过悬停进行选择，为什么应该选择某些内容..

< a href="http://jsbin.com/inigi3" rel="nofollow">预览

Answer 3

您可以使用 jQuery 的 hover 来做到这一点：

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

实时示例

这会将“选定”类切换到鼠标经过的 li，如果鼠标离开一个 li 并且不进入另一个，它将删除该类（没有一个类将具有“选定的”类）。我认为这就是您所说的您想要的，尽管它与其中一个一开始就已经拥有“选定”课程的情况不符。

如果您只想在某人将鼠标悬停在 li 上时更改它，但不想在鼠标离开 li 而不输入另一个时删除它，请使用 < code>mouseenter:

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

实例

如果您查找 mouseenter各种参考文献中的事件，他们会告诉你这是 IE 特定的。确实如此，但它非常有用，以至于 jQuery 在其他浏览器上模拟了它。

更新：如果您愿意，可以将上面的 siblings("li") 更改为 siblings("li.selected")，例如：

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

这可能会稍微提高效率（不要试图从已经拥有的类中删除一个类）。 这是第一个示例（带有 hover），已更新以实现此目的； 这是第二个示例（使用 mouseenter）进行更新以实现此目的。

---

离题：但是根据您想要的效果，您也许可以使用 CSS 而不是使用 jQuery 和“选定”类来实现它。如果您只想在鼠标实际悬停在 li 上时突出显示它（上面的 hover 示例），而不是让最后一个 li 突出显示（上面的 mouseenter 示例），如果不需要支持 IE6，可以使用 CSS :hover 伪类：

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

Live example 但同样，只有当您想要悬停效果时，并且仅当您不需要支持 IE6（仅允许 :hover 在 a 元素上）。