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");
});
hover() is deprecated #66.
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.
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.
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).
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With