Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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");
});
like image 609
Glynn Avatar asked Jun 14 '11 14:06

Glynn


People also ask

Is hover deprecated in jQuery?

hover() is deprecated #66.

What is the jQuery equivalent of Onmouseover?

jQuery mouseover() Method Note: Unlike the mouseenter event, the mouseover event triggers if a mouse pointer enters any child elements as well as the selected element. The mouseenter event is only triggered when the mouse pointer enters the selected element. See the example at the end of the page for a demonstration.

Does jQuery handle hover?

The hover() is an inbuilt method in jQuery which is used to specify two functions to start when mouse pointer move over the selected element.

What is the difference between Mouseout and Mouseleave?

This means that mouseleave is fired when the pointer has exited the element and all of its descendants, whereas mouseout is fired when the pointer leaves the element or leaves one of the element's descendants (even if the pointer is still within the element).


1 Answers

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/

like image 99
Jason Jong Avatar answered Oct 24 '22 05:10

Jason Jong