Add active class to
and leave it after hover

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.

just remove this line: `$(this).removeClass('active');` this is the mouseout event and you are telling it to remove the class within it. — daddygames, Jun 18 '19 at 11:54
You should remove the div inside your UL, as this is not valid markup. https://stackoverflow.com/questions/11755628/can-i-use-div-as-a-direct-child-of-ul — lowry0031, Jun 18 '19 at 11:57
Please don't delete your [questions](https://stackoverflow.com/questions/56645268/li-always-active-after-hover), and ask the same question again. Instead of deleting, edit your question if needed. — Teemu, Jun 18 '19 at 11:59
is the question how not to remove the active class if it is already active? — Pete, Jun 18 '19 at 12:08
Your HTML is invalid to begin with, you can not put a `div` as child of `ul`. And what you actually want seems rather unclear. — 04FS, Jun 18 '19 at 12:08
@pete What I want is to add class active when hover and keep that class when Im not hover any element. — JAVIER MARTIN BALSA, Jun 18 '19 at 12:10
Then your answer is below as it does exactly what you just asked for — Pete, Jun 18 '19 at 12:10
Iowry0031's answer does exactly what you want, and you say it's not working ..? I guess you want to have an active class on hovered elements, and if not hovering any `li`, then keep the last hovered `li` active? — Teemu, Jun 18 '19 at 12:10
@teemu, that is correct. But the code below is not working for me. Sorry for my english. — JAVIER MARTIN BALSA, Jun 18 '19 at 12:15
This is exactly what Im trying to do: Section: A programme for every vision https://www.esade.edu/en/ — JAVIER MARTIN BALSA, Jun 18 '19 at 12:19

score 2 · Answer 1 · answered Jun 18 '19 at 11:59

2

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.

answered Jun 18 '19 at 11:59

lowry0031

180
1
10

Is not working, the last item hovered is always visible. – JAVIER MARTIN BALSA Jun 18 '19 at 12:02
1

@JAVIERMARTINBALSA But this is an answer to your question. – Teemu Jun 18 '19 at 12:05

score 0 · Accepted Answer · answered Jun 18 '19 at 12:23

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>

Add active class to and leave it after hover

2 Answers2

Add active class to
and leave it after hover