CODEWITHSUNDEEP
javascriptjqueryhtmlcsshover
user4057805
user4057805

Reputation:

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

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

Upvotes: 2

Views: 1010

Answers (6)

Vipin Sharma
Vipin Sharma

Reputation: 42

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.

Upvotes: 0

Matthew Lymer
Matthew Lymer

Reputation: 977

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.

Upvotes: 0

user4057805
user4057805

Reputation:

This works fine..

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

Upvotes: 1

Zaheer Mallik
Zaheer Mallik

Reputation: 11

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/

Upvotes: 1

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67187

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

Upvotes: 1

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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.

Upvotes: 1

Related Questions