Question

当我将鼠标悬停在列表项上时，我希望将其添加到列表项中，然后将其删除并将其添加到其他列表项中，如果其他列表项悬停在其上。

这是我试过的：

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>

当我将鼠标悬停在一个项目上时，它会更改该类，但是如果我将鼠标悬停在另一个项目上，则会删除我首先悬停在该项目上的类，但不会将该类添加到我正在悬停的新项目中过度。不知道为什么，任何帮助都会受到赞赏。

Answer 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上时，这将删除该课程，不确定这是否是你想要的功能

Answer 2

首先，没有理由在搜索中添加多个id标记：

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

但更好，因为你自己就是李：

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

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

2 个答案: