Question

我正在开发电子商务，标题中有一个购物车图标。问题是我的推车内容div在我可以点击产品链接或结账按钮之前就消失了。

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

我有以下代码，其中类.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中。然后，您只需在包装器的hide()事件上调用mouseleave。

$('.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应用边框并检查鼠标是否会影响这两个div。

更好地了解更新代码的其余部分

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
}

图标鼠标移开后Div消失

3 个答案: