CODEWITHSUNDEEP
javascriptjqueryhover
Glynn
Glynn

Reputation: 265

jquery hover and stay until mouse out

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

Upvotes: 6

Views: 6310

Answers (3)

Detect
Detect

Reputation: 2069

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

Upvotes: 0

m90
m90

Reputation: 11822

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

Upvotes: 0

Jason Jong
Jason Jong

Reputation: 4330

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.com/stop/

Upvotes: 2

Related Questions