需要多次防止提示的出现(即使光标不在链接上,也没有指向链接的线索仍然存在)。
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.fadeOut();
});
});
要了解将红色方块移动多次的问题,然后将其沿
方向移除我为我糟糕的英语道歉
答案 0 :(得分:3)
您需要先停止任何排队的动画...
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.stop().fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.stop().fadeOut();
});
});
<强> Working jsfiddle example... 强>
顺便说一句,您不应该有多个具有相同ID的元素。您需要重新考虑如何将元素相互关联 - 也许使用数据属性。
这是一个建议的替代方案......
<强> Working jsfiddle example... 强>
HTML更改
<a class="area_tooltip" data-associated-tooltip="item_1">show</a>
Javascript更改
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).data("associated-tooltip"));
tooltip.stop().fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).data("associated-tooltip"));
tooltip.stop().fadeOut();
});
});
您将提示ID放在属性data-associated-tooltip
中,然后您可以使用$(this).data("associated-tooltip")
访问该ID。这将消除任何可能导致难以解决的问题的ID冲突。