Div 图标鼠标移出后消失

Question

我从事电子商务工作，header 中有一个购物车图标。问题是我的 div 和购物车内容在我可以放置鼠标之前就消失了，点击产品 link 或结帐按钮。

我需要什么：当鼠标悬停在购物车图标或购物车内容上时，我必须能够与我的购物车内容进行交互。

我有以下代码，其中 class .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

考虑到您的代码，我唯一能想到的是您的 div 过度重叠了您调用的事件 div。检查 .hover 事件元素是否与隐藏元素重叠。将边框应用到 div 并检查鼠标悬停会影响两个 divs.

为了更好地理解更新其余代码

Answer 3

我对这种场景的建议你可以使用mouseover() and 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
}

Div 图标鼠标移出后消失

Div disappear after icon mouseout

javascript

jquery

mouseevent

jquery-hover