鼠标悬停时弹出窗口消失

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执行，因此弹出窗口被隐藏。 在这里阅读更多。