2

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

我有一个清单

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

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

4

3 回答 3

8

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

$('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>s 和向上/向下箭头键的版本：

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/

于 2011-01-16T09:44:53.003 回答
3

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

标记：

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

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

预习

于 2011-01-16T09:48:38.313 回答
2

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

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

活生生的例子

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

如果您只想在有人将鼠标悬停在 an 上时更改它，li但在鼠标离开 an而不进入另一个时不移除它，请使用：limouseenter

$("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... */
}

现场示例但同样，这仅在您想要悬停效果的情况下，并且仅在您不需要支持 IE6（仅允许:hover在a元素上）的情况下。

于 2011-01-16T09:44:52.760 回答