在 mouseleave 后保持悬停 div 打开并在 div 窗口外单击或关闭按钮将其关闭答案

【问题标题】：Keep hover div open after mouseleave and close it with click outside the div window or close button在 mouseleave 后保持悬停 div 打开并在 div 窗口外单击或关闭按钮将其关闭
【发布时间】：2023-03-25 14:45:01
【问题描述】：

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

$('#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_button”上，它不会打开“shopping_cart”div，在检查元素上显示

$('#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

如果有人有的话，仍在寻找更干净的解决方案....

感谢大家的帮助。

【问题讨论】：

当然.shopping_cart 仍然是隐藏的，因为您将鼠标移到#shopping_button 上，所以在您的函数中使用$(this) 您只是设置该按钮的可见性，而不是您的购物车元素.所以重写你的函数来专门设置后者的可见性。
感谢您为我指明正确的方向

标签： javascript jquery html css

【解决方案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，因为我认为购物车不应该占用空间（或者它必须占用空间吗？见here）

编辑：我还添加了在您点击外部时关闭购物车的功能！说明见here！

希望对你有所帮助...

【讨论】：

谢谢，我已经对问题进行了排序，接受您的回答，因为它还提供了带有关闭按钮的解决方案。

【解决方案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');
})

【讨论】：