i am having some trouble with the menu bar on this website: . Now, the second li element is active. What i want to do, is that on hover over any other li element in the menu, the class of the current active li element bees blank and on on hover out, it bees active again. If you visit the link you can easily understand what i what.

If you need any information pls ask.

thank you in advance!

My code:

var lis = document.getElementsByTagName('ul'); 
for (var i=0, len=lis.length; i<len; i++){ 
    lis[i].onmouseover = function(){ 
        var firstDiv = this.getElementsByTagName('li')[1]; 
        firstDiv.className = ''; 
        var ul = $(this).parent(document.this.getElementsByTagName('ul')[1]); 
        ul.className = ''; 
    }; 
    lis[i].onmouseout = function(){ 
        var firstDiv = this.getElementsByTagName('li')[1]; 
        firstDiv.className = 'active'; 
    }; 
};

EDIT: Thank you all for your answers! That really helped!

i am having some trouble with the menu bar on this website: http://www.re-generation.ro/ro/campanii/minerit-aurifer . Now, the second li element is active. What i want to do, is that on hover over any other li element in the menu, the class of the current active li element bees blank and on on hover out, it bees active again. If you visit the link you can easily understand what i what.

If you need any information pls ask.

thank you in advance!

My code:

var lis = document.getElementsByTagName('ul'); 
for (var i=0, len=lis.length; i<len; i++){ 
    lis[i].onmouseover = function(){ 
        var firstDiv = this.getElementsByTagName('li')[1]; 
        firstDiv.className = ''; 
        var ul = $(this).parent(document.this.getElementsByTagName('ul')[1]); 
        ul.className = ''; 
    }; 
    lis[i].onmouseout = function(){ 
        var firstDiv = this.getElementsByTagName('li')[1]; 
        firstDiv.className = 'active'; 
    }; 
};

EDIT: Thank you all for your answers! That really helped!

• javascript
• jquery

Share Improve this question Follow edited Nov 9, 2012 at 21:02 musicvicious asked Nov 9, 2012 at 19:57 musicviciousmusicvicious 1,0931616 silver badges2222 bronze badges 9

• 3 My first tip would be either use jQuery or don't. – Evan Davis Commented Nov 9, 2012 at 20:04
• whoever answers this, refactor this mess into jquery – Huangism Commented Nov 9, 2012 at 20:05
• musicvicious: it makes more semantic sense to put hover events (and styling) on the A-tag, not the LI. – Diodeus - James MacFarlane Commented Nov 9, 2012 at 20:06
• @mathletics i would really use whatever works best. – musicvicious Commented Nov 9, 2012 at 20:06
• I am not 100% sure what should happen when I hover over the menu. Is it suppose to hide all the text and show the icon or hide other icon and text and show the current hovered icon? – Huangism Commented Nov 9, 2012 at 20:08

 |  Show 4 more ments

5 Answers 5

Sorted by: Reset to default 2

The first thing you probably want to do is assign two different states/classes: active and current. One tells you which one should be shown, and the other actually toggles the visibility.

$('#menu').on('mouseover', '> li', function(e) {
    # attach hover event to the menu, and check which LI you are hovering
    if (!$(this).hasClass('.current)')) {
        $('.current', '#menu').removeClass('active');
    }
}).on('mouseout', '> li', function (e) {
    if (!$(this).hasClass('.current)')) {
        $('.current', '#menu').addClass('active');
    }
});

Here you are selecting just the direct descendants and updating the class, provided it's not the currently active list item.

HTML:

<ul id="menu">
    <li>Item 1</li>
    <li class="current active">Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>​

JavaScript:

$('#menu li').on('mouseover', function() {
    var li$ = $(this);
    li$.parent('ul').find('li').removeClass('active');
    li$.addClass('active');
})
.on('mouseout', function() {
    var li$ = $(this);
    li$.removeClass('active');
    li$.parent('ul').find('li.current').addClass('active');
});​

DEMO

I would use JQuery for this. Something like this:

$('li').hover(function(){
  $('li.active').removeClass('active').addClass('normal');
});

$('li').mouseleave(function(){
  $('li.normal').removeClass('normal').addClass('active');
});

What you're missing is a way to remember what the default state is. Here is my answer, and a Fiddle

HTML:

<ul class="menuWithDefault">
    <li><a href="/one.html">Link One</a></li>
    <li class="active"><a href="/two.html">Link One</a></li>
    <li><a href="/three.html">Link One</a></li>
    <li><a href="/four.html">Link One</a></li>
</ul>

Javascript:

$(".menuWithDefault").each(function() {
    var defaultItem = $(this).find(".active").first();

    $(this).find("li").hover(function() {
        defaultItem.toggleClass('active', false);
        $(this).toggleClass('active', true);
    }, function() {
        $(this).toggleClass('active', false);
        defaultItem.toggleClass('active', true);
    });
});​
​

 $(document).ready(function(){
        $('li').hover(function(){
            $(this).addClass('active').siblings().removeClass('active')
        }); 
     });

li.active{
  color:red;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="active">List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
 </ul>