Question

I have the following jQuery function:

$(function(){
            if ($(".menu li").hasClass("active")) {
                    $(".active").css("margin-top", "6px");
              }
        });

This is applied to a CSS/jQuery menu, which expands and contracts when each menu item is hovered over. The onClick event adds a margin-top of 6px to give the impressions of a button depress.

I’m then using PHP to detect which page the user is visiting to add an .active class to the relevant menu item.

The question, the .active class should remain in place until the user hovers over a different menu item. At which point the .active class should be removed from this element – As the .active class is reused on the .hover events.

Here is the basic HTML Markup:

<ul id="menu">
<li>
<div class="inner">
<div class="button"><img src="images/insightbutton.png" /></div>
<div class="description">&nbsp;</div>
</div>
</li>
<li>
<div class="inner">
<div class="button"><img src="images/insightbutton.png" /></div>
<div class="description">&nbsp;</div>
</div>
</li>
</ul>

How can I keep the .active class applied to the active menu item, but remove it when .inner is hovered over?

Answer 1

You could do this:

$(".menu li.active").addclass("onPage");
$(".menu li").hover(function() {
  $(".menu li.active").removeClass("active");
  $(this).addClass("active");
}, function() {
  $(this).removeClass("active");
  $(".menu li.onPage").addClass("active");
});

This code does the following:

• Assigns a placeholder class to the original active (assigned by your PHP).
• On hover, removes the active class from all <li> siblings and sets the hovered to one to active.
• On leaving hover, it removes active from itself and selects the placeholder and restores active to the original (the page they’re on).