我正在尝试做的事情: 我有一个在页面加载时生成并隐藏的 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% 的 tooltip div 会闪烁,也就是说,即使鼠标不动,它也会无限隐藏和显示。似乎 mouseover 和 mouseout 事件在无休止地触发。有人告诉我使用 hoverintent 可以解决这个问题,但似乎没有什么不同。有人有什么主意吗?