鼠標懸停時彈出窗口消失

Question

我正在嘗試在彈出窗口的 map 上顯示地址，如下圖所示。

彈出圖像：

當我將 hover 鼠標放在 pin 圖標上時，會出現彈出窗口，但是當我移動到彈出窗口時，它會消失。

Javascript 我正在使用：

  <script>

        jQuery(function($) {
  var pop = $('.map-popup');
  pop.click(function(e) {
    e.stopPropagation();
  });

  $('a.marker').hover(function(e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).next('.map-popup').toggleClass('open');
    $(this).parent().siblings().children('.map-popup').removeClass('open');
  });

  $(document).click(function() {
    pop.removeClass('open');
  });

  pop.each(function() {
    var w = $(window).outerWidth(),
        edge = Math.round( ($(this).offset().left) + ($(this).outerWidth()) );
    if( w < edge ) {
      $(this).addClass('edge');
    }
  });
});



    </script>

代碼筆鏈接： codepen

Answer 1

代替

$('a.marker').hover(function(e) {

利用

$('a.marker').mouseenter(function(e) {

hover處理 mouseenter 和 mouseleave 事件。 如果您沒有為 mouseleave 傳遞處理程序，它將為 mouseenter 執行 function，所以在您的情況下，

$(this).next('.map-popup').toggleClass('open');

再次為mouseleave執行，因此彈出窗口被隱藏。 在這里閱讀更多。