将鼠标悬停在列表项上时使用 jQuery 添加和删除类的问题答案

【问题标题】：Problem with adding and removing classes with jQuery when hovering over a list item将鼠标悬停在列表项上时使用 jQuery 添加和删除类的问题
【发布时间】：2010-05-24 00:09:19
【问题描述】：

当我将鼠标悬停在列表项上时，我想将一个类添加到它，然后如果悬停在不同的列表项上，则将其删除并添加到不同的列表项。

这是我尝试过的：

jQuery -

$(document).ready(function() {
        $("#results").text("Tournaments");
        $("#Tournaments").addClass("box-active");
        $("#box ul li").hover(function() {
            var show = $(this).attr('id');
            $("#results").text(show);
            $("#box ul li").each(function() {
                $(this).removeClass("box-active");
                });
            $("#box ul li#" + show).addClass("box-active");
            });
        });

HTML -

    <div id="box">
        <ul>
            <li id="Tournaments">Tournaments</li>
            <li id="Join">Join</li>
            <li id="Forums">Forums</li>
            <li id="GameBattles">GameBattles</li>
            <li id="Practice">Practice</li>
        </ul>
        <p>Hovering over: <span id="results"></span></p>
    </div>

当我将鼠标悬停在一个项目上时，它会更改类，但如果我将鼠标悬停在另一个项目上，它会删除我第一次悬停在项目上的类，但不会将类添加到我悬停的新项目超过。不知道为什么，如果有任何帮助，我们将不胜感激。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

我认为this question 的答案可能会有所帮助。

可能是这样的：

   $('#box ul li').hover( function(){
      $(this).addClass('box-active');
      $("#results").text($(this).attr('id'));
   },
   function(){
      $(this).removeClass('box-active');
      $("#results").text('');
   });

编辑：当您停止将鼠标悬停在 li 上时，这将删除该类，不确定这是否是您想要的功能

【讨论】：

【解决方案2】：

一方面，没有理由在搜索中放置多个 id 标签：

$("li#" + show).addClass("box-active");

但更好的是，因为你在 li 本身：

$(this).addClass('box-active');

我不确定这是否可行，但试试这个：

$(document).ready(function() {
    $("#results").text("Tournaments");
    $("#Tournaments").addClass("box-active");
    $("#box ul li").hover(function() {
        $("#results").text( $(this).attr('id') );
        $("#box ul li.box-active").removeClass('box-active');
        $(this).addClass('box-active');
    });
});

【讨论】：