鼠标离开后保持悬停div打开，然后在div窗口或关闭按钮之外单击以将其关闭

Question

当悬停在“ shopping_button”上时，我有以下打开和关闭div“ shopping_cart”的jquery

$('#shopping_button, .shopping_cart').on('mouseenter',function(){
  $(this).css('z-index','300');
  $(this).css('visibility','visible');
 })
$('#shopping_button, .shopping_cart').on('mouseleave',function(){
  $(this).css('z-index','189');
  $(this).css('visibility','hidden');
  $(this).css('opacity','0');
 });

我要实现的目标需要帮助，即“ shopping_cart”在mouseleave上保持打开状态，并且仅在“ shopping_cart” div外部单击时可以关闭，或者可以在“ shopping_cart” div内添加关闭按钮以将其关闭。

多谢你们。

编辑

我在上面的代码中添加了以下内容

$('html').click(function () {
    $('.shopping_cart').css('visibility','hidden');
});

它可以完成工作，仅在“ shopping_cart” div外部单击时关闭窗口，但是现在如果再次悬停在“ shopping_cart” div上，它将不会打开“ shopping_cart” div，它显示在inspect元素上

$('#shopping_button, .shopping_cart').on('mouseenter',function(){
  $(this).css('z-index','300');
  $(this).css('visibility','visible'); <---This Remain Hidden
 })

有什么建议吗？

分类
将此添加到mouseenter功能中

  $('.shopping_cart').css('visibility','visible');

还有vollhhaaaa ....：D

如果有人，仍在寻找更清洁的解决方案。

感谢您的所有帮助。

Answer 1

尝试查看此JSFiddle： http : //jsfiddle.net/m8nrzL7d/2/

$('#shopping_button').mouseenter(function(){
   $("#shopping_cart").css('display','block');
})
$('#btn-close').click(function(){
   $("#shopping_cart").css('display','none');
})
$('html').click(function() {
   $("#shopping_cart").css('display','none');
});

$('#shopping_cart').click(function(event){
    event.stopPropagation();
});

我对您的代码进行了一些更改，但是很简单：我添加了一个按钮，因为它实现起来更快。 然后我用ID而不是class替换了购物车，因为根据我的经验，我在类和jquery上遇到了麻烦事件。 我用display: none代替visibility: none ，因为我认为购物车不应该占用空间（或者一定要占用空间吗？请参见此处 ）

编辑：如果您单击外部，我还添加了关闭购物车的功能！ 看到这里的解释！

我希望我能帮助你...

Answer 2

最好使用css类来格式化元素：

.shopping_cart {
z-index: 189;
visibility: hidden;
opacity: 0;
}
.shopping_cart_active{
z-index: 300;
visibility:visible;
}

因此，您在悬停时添加了shopping_cart_active类：

$('#shopping_button, .shopping_cart').on('hover',function(){
$(this).addClass('shopping_cart_active');
});

而当您想要它之外时，可以使用以下命令：

$(html).on('click', function(){
$('.shopping_cart.).removeClass('shopping_cart_active');
})