Блог

У меня есть следующий код:

     $('a.uiPopup').hover(function () {          
            $('.uiTip').show();
        },
        function () {
            $('.uiTip').remove();
        });

        $('div.uiTip').live("mouseover", function () {
            $(this).stop(true, true).show();
        });
        $('div.uiTip').live("mouseleave", function () {
            $(this).remove(); });
        });
  

Итак, при наведении uiPopup uiTip курсора появляется, а затем, когда вы снимаете его, он снова исчезает, НО если вы наведете курсор на подсказку, это остановит удаление подсказки и сохранит ее на экране до тех пор, пока ваша мышь не исчезнет, а затем удалит ее.

Не работает, хотя:/ Есть идеи? Спасибо

Это .remove() намеренно, как в моем реальном скрипте (это фрагмент, показывающий мой пример) Я использую AJAX для загрузки в .uiHelp и у них есть идентификаторы unqiue (опять же, не показаны в приведенном выше примере как выходящие за рамки вопроса) Все это работает нормально, только не о том, чтобы остановить его, когда пользователь наводит указатель мыши на саму подсказку!

РЕДАКТИРОВАТЬ: для тех, кто хочет увидеть полный сценарий и почему я должен использовать наведение:

 $('a.uiPopup').hover(function () {
            $tip = '<div class="uiTip uiOverlayArrowLeft loading"><div class="uiOverlayContent"><!--content here --></div><i class="uiOverlayArrow"></i></div>';

            $newtip = $($tip).attr('id', 'organisationId-'   $(this).attr('id'));

            $($newtip).find('.uiOverlayContent').load(AppURL   'Organisations/Manage/Tip', function () { $($newtip).removeClass('loading') });

            $('body').append($newtip);

            $location = $(this).offset(); $top = $location.top; $left = $location.left; $right = $location.right; $bottom = $location.bottom;

            $left = $left   $(this).width();
            $left = $left   8;

            $top = $top - 10;

            $($newtip).css({
                'top': $top   'px',
                'left': $left   'px'
            });
        },
        function () {
            $id = "div#organisationId-"   $(this).attr('id');
            $($id).remove();
        });

        $('div.uiTip').live("mouseover", function () {
            $(this).stop(true, true).show();
        });
        $('div.uiTip').live("mouseleave", function () {
            $(this).remove(); });
        });
  

Ну, вы упоминаете uiTip в одном фрагменте и uiHelp в другом. Является ли uiTip где-то внутри uiHelp div? Если это так, то проблема в том, что ваша мышь покидает ссылку, чтобы попасть поверх div всплывающей подсказки, и поэтому она удаляется до того, как ваша мышь будет считаться «над» div.

Вот возможное решение:

 $('a.uiPopup').hover(function () {
  $('.uiHelp').show();
}, function () {
  $('.uiHelp').data('timer', setTimeout(function () {
    $('.uiHelp').remove();
  }, 100));
});

$('div.uiHelp').live('mouseover', function () {
  if ($(this).data('timer')) {
    clearTimeout($(this).data('timer'));
  }
});

$('div.uiHelp').live('mouseleave', function () {
  $(this).remove();
});
  

Это дает пользователю десятую долю секунды, чтобы перейти по ссылке во всплывающей подсказке, прежде чем она исчезнет. Вы можете настроить это время в вызове setTimeout.

Я оставлю это на ваше усмотрение, чтобы разобраться с uiTip / uiHelp — вам просто нужно где-то хранить ссылку на таймер.

Может быть, это поможет вам

 $('a.uiPopup').hover(function () {          
    $('.uiHelp').show();
},function (e) {
    if(!$(e.target).parents('div.uiTip').length)
       $('.uiHelp').remove();
});
$('div.uiTip').live("mouseleave", function () {
    $(this).remove();
});
  

вы должны использовать hide() вместо .remove() , так как вы хотите скрыть его, а не удалять разметку из DOM.