How to set hover effect continue show when mouse over hover elements?

Question

I have two main divs that have different css class. I want to show second div when i hover on first div. Hover content showing fine but when mouse move hovered content. that div hide automatically.

Here is my html content:

<div class="cart_hover">XYZ</div>
<div id="header-cart" class="skip-content">
  <ul>
    <li>Home</li>
    <li>About Us</li>
    <li>Contact Us</li>
  </ul>
</div>

Here is my CSS classes:

.cart_hover {

}
.show-content{
  display:block;
}
.skip-content {
  display:none;
}

And Here is my jQuery:

$(".cart_hover").hover(function(){
    $("#header-cart").addClass("show-content");
  }
);

Answer 1

Try to use the following signature of hover function,

var elem = $("#header-cart");
$(".cart_hover").hover(function(){
    elem.addClass("show-content");
  },function(){
    elem.removeClass("show-content");
  }
);

In your code, you have passed the hoverIn handler but not the hoverOut's . Also in css, the specificity for the class .show-content is lesser than the specificity of .skip-content . So increase it also to make the code working.

DEMO

Answer 2

Working fiddle

You could use toggleClass to toggle between the both classes skip-content and show-content because skip-content will override the display of show-content :

$(".cart_hover").hover(function(){
    $("#header-cart").toggleClass("skip-content","show-content");
});

Hope this helps.

Answer 3

The hover() method specifies two functions to run when the mouse pointer hovers over the selected elements.

This method triggers both the mouseenter and mouseleave events.

If only one function is specified, it will be run for both the mouseenter and mouseleave events.

As your requirement is to display the div on mouseenter and that div should not hide then you can use following two example:

1) $(".cart_hover").mouseenter(function(){
$("#header-cart").css({"display" : 'block'});

});

2)$(".cart_hover").hover(function(){
$("#header-cart").css({"display" : 'block'});

} );

jsfiddle code : https://jsfiddle.net/mallik_jahir/3o1e0q00/2/

Answer 4

This works fine..

$(".cart_hover").hover(function(){
    $("#header-cart").toggleClass("skip-content","show-content");
});

Answer 5

The previous answer provides a good solution to your jQuery. But have you considered a fully CSS implementation?

.cart_hover:hover + #header-cart, #header-cart:hover{
    display:block;
}

So long as header-cart comes directly after cart_hover, this will work without the need for a jQuery hover.

Answer 6

So Final code will be like this and you can use xyz as a button. Even you can use the CSS3 Transitions to make the menu smoothly.

 .cart_hover { float:left; background:#99CC00; padding:10px; } .show-content{ display:block; } .skip-content { display:none; float:left; } .cart_hover:hover + #header-cart, #header-cart:hover{ display:block; } 

 <div class="cart_hover">XYZ</div> <div id="header-cart" class="skip-content"> <ul> <li>Home</li> <li>About Us</li> <li>Contact Us</li> </ul> </div> 

Here "#header-cart:hover " helping the code to showing the menu during the second section hover.