Всплывающее окно исчезнет при наведении мыши

Question

Я пытаюсь отобразить адрес на карте во всплывающих окнах, как показано ниже на изображении.

Изображение всплывающего окна:

При наведении курсора мыши на значок булавки появляется всплывающее окно, но при его перемещении во всплывающее окно оно исчезает.

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>

Ссылка Code Pen: codepen

Answer 1

Вместо

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

использование

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

hover обрабатывает события, связанные как с указанием мыши, так и с отпусканием мыши. Если вы не передадите обработчик для mouseleave, он выполнит функцию для mouseenter, поэтому в вашем случае

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

будет выполнен снова для mouseleave, поэтому всплывающее окно будет скрыто. Подробнее здесь .