jQuery悬停并保持直到鼠标移出

Question

我正在尝试创建一个“购物车”链接，当鼠标悬停时，购物车会弹出。我能够让购物车在悬停时打开并在移开时关闭。但是，我无法让购物车块在悬停后保持打开状态。我希望购物车块在悬停时打开并保持打开状态。如果您在此页面右上角悬停在“购物车”链接上，您将明白我的意思。

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

我使用的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");
});

- Glynn

---

http://jsfiddle.net/kongr45gpen/K55ct/1/ - kongr45gpen

Answer 1

您需要取消第一个mouseout()，因此您需要调整第二部分为：

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

请注意，我正在传递true给stop，这样它就会清除当前的动画队列。jQuery文档中关于stop的内容请参考http://api.jquery.com/stop/。

- Jason Jong

Answer 2

看起来 .block-cart 不是触发悬停的元素的子元素，所以为了保持悬停状态，你需要按照一定的 HTML 结构使 .block-cart 成为触发悬停的元素的子元素。

顺便说一句：为什么不使用 $(this).hover() 而不是 $(this).mouseover().mouseout() ，这样会更容易一些。

- m90

---

你好，感谢你的帮助。不幸的是，我在尝试将HTML作为所需元素的子元素时遇到了很多麻烦。这是因为该网站基于Magento购物车软件，非常难以更改。我想，如果有一种方法可以延迟悬停在购物车链接上的mouseout事件，那么我就可以初始化block-cart函数的悬停，因此购物车就不会消失。这可能吗？ - Glynn

Answer 3

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

- Detect

---

实际上，我更喜欢@kongr45gpen的解决方案。 它使用.mouseleave()、.mouseenter()并重新排列HTML，使block-cart位于#cart-links内部。 - Detect

非常感谢您的帮助。我无法将cart-block作为子html获取，因此选择了“Detect”的响应，这很完美！ :) - Glynn