jQuery 悬停功能显示覆盖但悬停显示内容时关闭

Question

我对 JS 有点陌生/jQuery 并且完成了悬停功能所以当悬停在 link 上时它显示了一个隐藏的 DIV 区域但是当我去然后悬停在显示的 div 区域当然会关闭。我希望如果我进入内容区域不会关闭但保持打开状态但如果离开该区域会关闭？

JS:

$('.mini-cart').hover(
  function () {
    cartOpen();
  }, 
  function () {
    cartClose();
  }
);



var overlay = $("#cart_slide");
  var cartContainer = $("#cart_over");

  function cartOpen() {
    cartContainer.fadeIn("slow");
    overlay.addClass("overlay");
  }

  function cartClose() {
   cartContainer.fadeOut("medium");
   overlay.removeClass("overlay");
  }

HTML:

<a class="mini-cart">hover link</a>
<div id="cart_over" style="display:none;">testing</div>

Answer 1

看来您需要将 open/close 函数分开。请看以下内容：

$('.mini-cart').hover(
    cartOpen();
);
 // You'll need to create a close button.. ex. <div class="close-button"></div>

$(".close-button").click(function(){
      cartClose(); 
});

Answer 2

您可以引入标志 (isCartOpen) 变量的用法，该变量将控制 DIV 是否应显示。

看到这个working JSFiddle example并在下面找到相关代码：

var isCartOpen = false;

$('.mini-cart, #cart_over').hover(
  function() {
    isCartOpen = true;
    cartOpen();
  },
  function() {
    isCartOpen = false;
    setTimeout(cartClose, 1000); // after 1 sec
  }
);

var overlay = $("#cart_slide");
var cartContainer = $("#cart_over");

function cartOpen() {
  cartContainer.fadeIn("slow");
  overlay.addClass("overlay");
}

function cartClose() {
  if (isCartOpen)
    return;
  cartContainer.fadeOut("medium");
  overlay.removeClass("overlay");
}

jQuery 悬停功能显示覆盖但悬停显示内容时关闭

jQuery hover function to display an overlay but closes when hover displayed content

html

javascript

css

jquery

hover