javascript - jquery hover and stay until mouse out - Stack Overflow

admin管理员组

文章数量:1410674

I am trying to create a 'cart' link where the shopping cart opens out on hover. I am able to get the cart to open out on hover and close when moving away. However I cannot get the cart block to stay open once hovered over. I would like the car block to open out on hover and stay open if you hover over it. You will see what I mean if you hover over the 'cart' link in the top right corner of this page.

.html

The jQuery I am using is:

jQuery('#cart-links .links .first a').mouseover(function(){
  jQuery('.block-cart').slideDown(400);
}).mouseout(function(){
  jQuery('.block-cart').slideUp(400);
});

jQuery(".block-cart").mouseover(function(){
 jQuery(this).show();
}).mouseout(function(){
 jQuery(this).fadeOut("slow");
});

I am trying to create a 'cart' link where the shopping cart opens out on hover. I am able to get the cart to open out on hover and close when moving away. However I cannot get the cart block to stay open once hovered over. I would like the car block to open out on hover and stay open if you hover over it. You will see what I mean if you hover over the 'cart' link in the top right corner of this page.

http://dl.dropbox./u/4380589/Rococlothing/index.html

The jQuery I am using is:

jQuery('#cart-links .links .first a').mouseover(function(){
  jQuery('.block-cart').slideDown(400);
}).mouseout(function(){
  jQuery('.block-cart').slideUp(400);
});

jQuery(".block-cart").mouseover(function(){
 jQuery(this).show();
}).mouseout(function(){
 jQuery(this).fadeOut("slow");
});

• javascript
• jquery
• hover

Share Improve this question Follow edited Aug 3, 2014 at 23:59 zx81 41.9k1010 gold badges9292 silver badges106106 bronze badges asked Jun 14, 2011 at 14:08 GlynnGlynn 26511 gold badge33 silver badges55 bronze badges 1

• 1 jsfiddle/kongr45gpen/K55ct/1 – kongr45gpen Commented Jun 14, 2011 at 14:34

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You need to cancel the first mouseout() so you'll need adjust the second part to

jQuery(".block-cart").mouseover(function(){
 jQuery(this).stop(true).show();
}).mouseout(function(){
 jQuery(this).fadeOut("slow");
});

note that the stop, I am passing in true so its clearing the current animation queue. jQuery doc for stop is @ http://api.jquery./stop/

hovered = false;

jQuery('#cart-links .links .first a').mouseover(function(){
    jQuery('.block-cart').slideDown(400);
}).mouseout(function(){
      setTimeout(function(){
      if(!hovered) {
        jQuery('.block-cart').slideUp(400);
      }}, 250);
   });

jQuery(".block-cart").mouseover(function(){
 hovered = true;
}).mouseout(function(){
 hovered = false;
 jQuery('#cart-links .links .first a').trigger("mouseout");
});

It looks like the .block-cart is not a child of the element that triggers the hover, so in order to keep the hover state active you'd have to structure your HTML in a way that the .block-cart is a child element of the element that triggers the hover.

Btw: why don't you use $(this).hover() instead of $(this).mouseover().mouseout(), it's a little easier

本文标签： javascriptjquery hover and stay until mouse outStack Overflow