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/（请注意，最后悬停的项目仍为红色）

更新：适用于多个<ul>的版本，以及上/下箭头键：

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

这与你的要求略有不同，因为最初没有选择任何东西，但是如果通过悬停进行选择，为什么应该选择某些东西..

Preview

Answer 3

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

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

Live example

这会将“已选择”类切换为鼠标结束的li，如果鼠标离开一个li而不进入另一个，则将删除该类（没有一个将具有“选定”类）。我认为这就是你所说的你想要的，虽然它与其中一个已经在开始时已经有了“选定”课程不匹配。

如果您只是想在有人将鼠标悬停在li上但而不是当鼠标离开li而没有输入另一个时将其删除，则使用{{1} }：

mouseenter

Live example

如果您在各种参考文献中查找$("selector_for_your_ul li").mouseenter( function() { $(this).addClass("selected").siblings("li").removeClass("selected"); } );事件，他们会告诉您它是特定于IE的。这是真的，但jQuery在其他浏览器上模仿它是非常有用的。

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

siblings("li.selected")

这可能会使它更有效率（不试图从已经拥有它的东西中删除一个类）。已更新Here's the first example（$(this).addClass("selected").siblings("li.selected").removeClass("selected");）以执行此操作; here's the second example（hover）已更新为此。

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

:hover

Live example但是，只有当你想要悬停效果时才会这样，并且只有你不需要支持IE6（只允许selector_for_your_ul li:hover { color: red; /* ...or whatever... */ }元素上的:hover时。 / p>

jquery：只在mouse-out上的mouseover-remove上添加class到list-items？

3 个答案: