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

Answer 1

您需要取消第一个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/

Answer 2

看起来.block-cart不是触发悬停的元素的子元素，因此为了使悬停状态保持活动状态，您必须以{{1}的方式构建HTML。 }是触发悬停的元素的子元素。

顺便说一下：为什么不使用.block-cart代替$(this).hover()，这样会更容易

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

jquery盘旋并留到鼠标外出

3 个答案: