jQuery悬停和取消悬停

我有以下代码：

$('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 id(在上面的示例中再次未显示超出范围问题)当用户悬停尖端本身时,哪一切都可以正常工作！

编辑：对于那些想要查看完整脚本以及为什么我必须使用悬停的人：

$('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).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 – 你只需要在某个地方存储对计时器的引用.

jQuery悬停和取消悬停

解决方法

猜你在找的jQuery相关文章