请看这个:http: //jsfiddle.net/Muj3d/8/
假设鼠标光标打开div_1
,现在将鼠标从 拖动div_1
到div_2
,如我们所见,第一次发生的动作mouseout
和之后mouseover
。好的,现在alerts()
从 js 代码中删除并再次重复鼠标拖动,如我们所见,div_2
没有删除,问题:为什么?
请看这个:http: //jsfiddle.net/Muj3d/8/
假设鼠标光标打开div_1
,现在将鼠标从 拖动div_1
到div_2
,如我们所见,第一次发生的动作mouseout
和之后mouseover
。好的,现在alerts()
从 js 代码中删除并再次重复鼠标拖动,如我们所见,div_2
没有删除,问题:为什么?
因为在mouseover
div2 事件中,您再次将其显示为block
. alert
似乎引入了延迟。尝试将鼠标从div_1
文档中的其他位置移动,而不是移动到div_2
,看到它div_2
按预期消失。
因为这两个事件“几乎”同时触发。我说的几乎意思是mouseover
之后的火灾mouseout
,让 div 显示 ( display: block
)。
如果您记录事件而不是警报,您将看到它们都按此顺序触发:http: //jsfiddle.net/Muj3d/14/
希望能解释一下。
你应该使用这个:
$("#div_1").on("mouseout", function () {
$("#div_2").css({
'display': "none"
});
});
$("#div_1").on("mouseover", function () {
$("#div_2").css({
'display': "block"
});
});
使用带有 CSS 显示属性的引号。
只需将第二个事件发送者从更改#div_2
为#div_1
:
$(document).ready(function () {
$("#div_1").on("mouseout", function () {
//alert("action mouseout");
$("#div_2").css({display: "none"});
});
$("#div_1").on("mouseover", function () {
//alert("action mouseover");
$("#div_2").css({display: "block"});
});
});
您的两个功能正在隐藏然后显示 div。如果没有警报提供的执行暂停,这种情况会发生得如此之快,以至于您不会注意到它。
删除以下内容:
$("#div_2").css({
display: "block"
});
你会明白我的意思。