图标鼠标之后消失

Question

我正在研究电子商务，并且标题中有一个购物车图标。问题是我的Div Cart内容在我戴上鼠标之前就消失了，要么单击产品链接或在结帐按钮上。

我需要的：我必须能够在鼠标上方的鼠标图标或购物车内容上与购物车内容进行交互。

我有以下代码，其中.cart-label是我的购物车图标，而#panel是我的购物车内容。

$k('.cart-label').hover(function() {
            $k('.header-cart #panel').stop().fadeIn('fast');
        },
        function() {
            $k('.header-cart #panel').stop().fadeOut('fast');
    });

我在做什么错？

Answer 1

您需要在同一div中包装卡车图标和购物车菜单。然后，您仅在包装器的mouseleave事件上调用hide()。

$('.cartIcon').mouseover(function(){
    $('.cartInner').show();
});
$('.cartWrapper').mouseleave(function(){
    $('.cartInner').hide();
});

.cartWrapper .cartIcon {
  height: 50px;
  width: 100px;
  background: green;
}
 
.cartWrapper .cartInner {
  display: none;
  height:200px;
  width:100px;
  background: blue;
}
.cartWrapper {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cartWrapper">
    <div class="cartIcon">
      Cart icon
    </div>
    <div class="cartInner">
      Cart inner
    </div>
</div>

Answer 2

考虑到您的代码，我只能想到的是您在呼叫的事件divs上拍打的divs。检查.Phover事件元素与隐藏元素重叠。将边框应用于DIV并检查鼠标将影响两个Divs。

更好地了解更新其余代码

Answer 3

我对这种情况的建议您可以使用MouseOver（）和Mouseout（）

.mouseover（）与.hover（）不同，出于相同的原因.mouseover（）与.mouseenter（）。

。

$('selector').mouseover(over_function) // may fire multiple times
// enter and exit functions only called once per element per entry and exit
$('selector').hover(enter_function, exit_function)

尝试使用以下代码

$('.header-cart #panel').mouseover(function() {
     //action when mouse over 
}
$('.header-cart #panel').mouseout(function() {
       //action when mouse out
}