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");
  }
);

Zakaria Acharki · Accepted Answer · 2016-03-02 10:45:09Z

1

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.

answered Mar 2, 2016 at 10:45

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rajaprabhu Aravindasamy · Accepted Answer · 2016-03-02 10:45:54Z

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

edited Mar 2, 2016 at 10:45

answered Mar 2, 2016 at 10:40

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

2 Comments

user4057805 Over a year ago

but I am not able to select list (hovered) elements

Rajaprabhu Aravindasamy Over a year ago

@BashkarJaved For that you have to modify your html. jsfiddle.net/3o1e0q00/1

Zaheer Mallik · Accepted Answer · 2016-03-02 13:28:42Z

1

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/

answered Mar 2, 2016 at 13:28

Zaheer Mallik

111 bronze badge

Comments

user4057805 · Accepted Answer · 2016-04-01 10:13:34Z

1

This works fine..

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

answered Apr 1, 2016 at 10:13

user4057805

Comments

marc_s · Accepted Answer · 2016-04-28 09:00:49Z

0

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.

edited Apr 28, 2016 at 9:00

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Mar 2, 2016 at 10:46

Matthew Lymer

9776 silver badges10 bronze badges

5 Comments

user4057805 Over a year ago

But I tried same css it is also behaving like jQuery example

Matthew Lymer Over a year ago

I see - so you want the header-cart to stay visible when you stop hovering?

user4057805 Over a year ago

yes I want to so header-cart continue but when mouse out from header-cart. so header-cart div hide

Matthew Lymer Over a year ago

I'm confused - that's exactly what the CSS above will do. On hover of cart_hover, header-cart will appear. On mouseout of cart_hover, header-cart will hide.

user4057805 Over a year ago

On cart_hover mouse hover there same level div(header-cart) show and that div still open when my mouse coursor move from cart_hover to that div(header-cart). And when mouse out from div(header-cart) so that dive hide.

Vipin Sharma · Accepted Answer · 2016-04-28 11:57:42Z

0

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.

answered Apr 28, 2016 at 11:57

Vipin Sharma

5211 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

Comments

DEMO

2 Comments

Comments

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

Comments

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related