JQuery показать / скрыть при наведении. Скрытие, когда содержимое зависло

Question

http://wilwaldon.com/gift/index.html это страница вопроса.

Вот пастбина html / jquery: http://pastebin.com/L4HQBjBc

Pastebin of jQuery: http://pastebin.com/WmEUK7Ey

Если вы поместите значки над большой кнопкой «Активировать сейчас» с правой стороны (спутниковая тарелка, портфель, замок), появится div.

Желаемое действие - отображение div при наведении курсора и исчезновениепри зависании.

Что происходит, если вы наводите курсор на текст всплывающего окна, div исчезает.

Заранее спасибо!

Answer 1

Вместо использования 2-й части .hover(), которая совпадает с .mouseout(), оставьте ее и измените свою вторую функцию на .mouseleave().2-я часть наведения будет вызвана, как только мышь выйдет из od calloutpop, что будет происходить, когда указатель мыши наведет курсор на текст, как в своем собственном div.Использование .mouseleave() будет вызываться, когда мышь покидает элемент div, а не когда она наводит курсор на элемент внутри него.

Кроме того, следует подождать, пока dom будет готов, прежде чем выполнять какие-либо действия.Функции jQuery, в данный момент вы ожидаете только .hide() всплывающего окна:

jQuery(document).ready(function() {
    // hides the slickbox as soon as the DOM is ready
    jQuery('#calloutpop').hide();
    jQuery('#callout').hover(function() {
        jQuery('#calloutpop').fadeIn(500);
    });
    jQuery('#calloutpop').mouseleave(function(event) {
            jQuery(this).fadeOut(500);
    });
});

Посмотрите это здесь работает

Answer 2

Избавьтесь от кода mouseout и измените код hover на:

jQuery('#callout').hover(
    function() {jQuery('#calloutpop').fadeIn(500)}
    ,
    function() {jQuery('#calloutpop').fadeOut(500)}
);

Answer 3

Вы регистрируете зависшего слушателя на весь div. При первом наведении на него открывается. Затем, если пользователь переходит к одному из включенных значков, на включенном значке запускается событие наведения. В событиях Javascript всплывают DOM (ключевое слово: распространение события ). Таким образом, событие hover будет распространено на родительский div, в котором вы зарегистрировали слушатель hover. Это заставит div скрыться.

Вы можете зарегистрировать парящих слушателей на значках, которые просто вызывают event.stopPropagation (), чтобы остановить распространение следующим образом:

$('.icons_in_hover').hover(function(e){
  e.stopPropagation();
});

Answer 4

Возможно, если у вас нет функции обработчика, сделайте что-нибудь или используйте только .mouseenter (), ваша проблема будет решена. Я думаю, что происходит, так как ваш div, который появляется, закрывает триггерный элемент, затем указатель мыши срабатывает, как только мышь попадает в нечто, не являющееся триггером (текст всплывающего div)

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

Попробуйте это

jQuery('#callout').mouseenter(function() {
   jQuery('#calloutpop').fadeIn(500);
});

jQuery('#calloutpop').mouseout(function(event) {
   if (!$(event.relatedTarget).is('#callout')) {
      jQuery('#calloutpop').fadeOut(500);
   }
});