Question

我有这个代码

<script>
    $("li").hover(
      function () {
        $(this).addClass('active');
      }, 
      function () {
        $(this).removeClass('active');
      }
      );
    </script>

为了在菜单中向我的li添加活动班级。

<ul class="list-first-level">
<div about="" typeof="" class="ds-1col entity entity-paragraphs-item paragraphs-item-modulo-de-enlaces-item view-mode-modulo_de_enlaces_01_d clearfix">
        <li id="elm" class="active always">
            <a href="/grados/eng/">Undergraduate programmes</a>
                <ul>
                    <li>
                        <a href="/grados/eng/ged">Law</a>
                    </li>
                </ul>
        </li>
    </div>
</ul>

在Im不在元素上悬停后，我不需要删除活动类。

Answer 1

只需使用此：

$("li").hover(function(){
    $(this).addClass("active");
});

尽管如此，您最终将获得许多活动的LI，并且不能提供良好的UX。

Answer 2

当您将鼠标悬停在某个元素上时，请从所有li元素中删除“ active”类，然后将其重新添加到当前元素中。这仍然意味着，如果用户离开最后一个悬停的元素-该元素将保持“活动”状态。

<script type="text/javascript">
    $("li").hover(
        function () {
            $("li").removeClass('active');
            $(this).addClass('active');
        }
    );
</script>

将活动类添加到<li>并在悬停后将其保留

2 个答案: