Question

我正在尝试做什么： 我有一个div生成并隐藏在页面加载上。当页面上的特定元素被鼠标悬停时，我想将div显示为元素上方的工具提示。我在页面上需要此功能的所有元素中添加了一个“ToolTipRequired”类，并在页面加载时绑定了hoverintent。

我的代码：

jQuery(document).ready(function () {
    jQuery('.ToolTipRequired').each(function () {
        jQuery(this).hoverIntent({ over: function (event) {
                var toolTip = jQuery('#ToolTipDiv');

                // xCoord = (destination - ((toolTip width - 14px padding either side of image) / 2)) + (destination width / 2);
                var xCoord = event.pageX - ((toolTip.width() - 28) / 2) - 15;
                // yCoord = destination - (toolTip height - 14px padding top and 10px padding bottom)
                var yCoord = event.pageY - (toolTip.height() - 25) - 15;

                // need to show the tool tip first so that we can set it's offset
                toolTip.show('fast');
                toolTip.offset({ left: xCoord, top: yCoord });
        },
        timeout: 500,
        out: function () {
            jQuery('#ToolTipPanel').hide();
        } 
    });
});

问题： 10％的时间它工作得很漂亮，另外90％的工具提示div闪烁，也就是说，即使鼠标保持静止，它也会隐藏并无限显示。似乎mouseover和mouseout事件无休止地触发。我被告知使用hoverintent会纠正这个问题，但似乎没有什么区别。有没有人有任何想法？

Answer 1

尝试使用mouseenter和mouseleave代替

$('.ToolTipRequired').mouseenter( function (event) {
//.........
 }).mouseleave( function (event) {
//........
 });

Answer 2

遇到此问题，您可以使用：

jQuery('.ToolTipRequired').hover(function(){/*OnmouseIn*/}, function(){/*onMouseOut*/});

jQuery - ToolTip - mouseover＆amp; mouseout似乎是在没有鼠标移动的情况下在循环中发射 - hoverintent没有帮助

2 个答案: