将活动类添加到<li>悬停后离开

Question

I have this code

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

In order to add class active to my li in a menu.

<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>

I need to not remove the active class after Im not hover on the element.

Answer 1

Just use this:

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

Although, you will end up with many active LI and does not provide a good UX.

Answer 2

When you hover over an element, remove the 'active' class from all li elements then add it back to the current element. This still means that if the user moves away from the last, hovered element - that element will remain in an 'active' state.

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