Geek Answers Handbook

Jquery hover and stay until mouse

I am trying to create a "cart" link where a shopping cart opens on hover. I can get a trolley to open when hovering and close when removing it. However, I cannot force the cart block to remain open as soon as it freezes. I would like the car block to open when hovering and stay open if you hang on it. You will see what I mean if you hover over the "cart" link in the upper right corner of this page.

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

I am using jQuery:

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");
});
+5
source share
3 answers
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");
});
0
source

mouseout(),

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

, stop, true, . jQuery doc - @http://api.jquery.com/stop/

+2

It .block-cartdoesn't seem to be a child of the element that triggers the freeze, so to maintain an active state of the freeze, you need to structure your HTML so that it is .block-carta child of the element that causes the freeze.

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

0
source

More articles:


All Articles