0

Есть сайт вопросов и ответов, в ответах есть блоки с количеством поставленных лайков. При наведении курсора мыши на него, скрипт связывается с сервером через 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'); //селектор блока с количеством лайками
1
  • Может есть смысл изменить условия задачи, чтобы ее решить? Например окно показывается 10 или сколько то секунд, а потом закрывается. Если (вместо mouseleave) поставить крестик закрытия или при клике на другую область блока , кроме popup - форма закрывается
    – Blay Wille
    Commented 27 мар. 2020 в 11:19

1 ответ 1

3

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

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>

1
  • Спасибо, вроде в демонстрации все работает, как и требовалось, чуть попозже попробую применить на практике. Благодарю. Commented 27 мар. 2020 в 13:42

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.