JQuery Скрытие всплывающего блока

Question

Есть сайт вопросов и ответов, в ответах есть блоки с количеством поставленных лайков. При наведении курсора мыши на него, скрипт связывается с сервером через ajax-запрос и получает список пользователей проголосовавших, на основе них отображает всплывающий блок. При отведении курсора мыши скрывает блок. Необходимо при отведении пользователем курсора мыши от блока, проверять не переместил ли он его на всплывающий блок, если нет, то только после этого скрывать, как это реализовать? Помогите пожалуйста, работа стоит. Вот упрощенный код:

//обработчик событий
$(document).on({

    mouseenter: function (event) { //при наведении курсора мыши

        var popup = createPopup('popup_votes'); //создать всплывающий блок c id = popup_votes
        popup.pasteContent('html content'); //вставляем в него результат полученный из ajax
        popup.show(); //отображаем

    },

    mouseleave: function (event) { //при отведении курсора мыши

        var popup = $('#popup_votes');

        if (если не навел на popup) {  //как реализовать

            popup.hide(); // закрыть

        }

    }

}, '.like_box'); //селектор блока с количеством лайками

Answer 1

Надеюсь, что правильно понял:

var likesBox = $('.likes')
var popup = $('.popup')
var shouldShowPopup = false
var isDataLoaded = false
var hideDelay = 500

function showPopup() {
  popup.show()
}

function hidePopup() {
  setTimeout(function() {
    if (!shouldShowPopup) {
      popup.hide()
      isDataLoaded = false
    }
  }, hideDelay)
}

function loadPopupData() {
  // ... грузите AJAX
  isDataLoaded = true
}

likesBox.on('mouseenter', function() {
  shouldShowPopup = true
  showPopup()
  if (!isDataLoaded) {
    loadPopupData()
  }
})

popup.on('mouseenter', function() {
  shouldShowPopup = true
})

$([likesBox, popup]).each(function() {
  this.on('mouseleave', function() {
    shouldShowPopup = false
    hidePopup()
  })
})

* {
  box-sizing: border-box;
}
body {
  height: 100vh;
}
.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.panel {
  width: 80%;
  padding: 13px 10px;
  background: blueviolet;
}
.likes {
  border: 1px solid white;
  display: inline-block;
  position: relative;
  color: white;
  cursor: pointer;
  padding: 20px;
}
.popup {
  width: 300px;
  height: 50px;
  margin-bottom:7px;
  background: lightgray;
  border:1px solid gray;
  border-radius: 5px;
  display: none;
  z-index: 20;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="popup"></div>
  <div class="panel">
    <div class="likes">
      Likes
    </div>
  </div>
</div>

БЛОГ НА HUSL

JQuery Скрытие всплывающего блока

Ответы (1 шт):