这是我的代码。请检查它。让我发疯的问题是,为什么如果我将鼠标移动到克隆的 div funCudDiv
上,即使它位于 divContainer
中,也会触发 mouseout 事件。
所以,如果你将鼠标悬停在 funCudDiv
上,你会看到所有的东西都在闪烁。
请帮助我。谢谢。
<!-- language: lang-js -->
<style type="text/css">
.canSelectedNodeHover
{
background-color: #E8F0F5;
}
</style>
<script language="javascript" type="text/javascript">
$(function () {
var foundDiv = $("#divContainer");
foundDiv.mouseover(function () {
var cloneDiv = $("#divRight").clone();
cloneDiv.attr('id', 'funCudDiv');
$("#divContainer").append(cloneDiv);
$("#divContainer").addClass("canSelectedNodeHover");
}).mouseout(function () {
$("#divContainer").removeClass("canSelectedNodeHover");
$("#funCudDiv").remove();
});
});
</script>
<div id="divContainer" style=" border:1px solid black; width:400px; height:400px">
</div>
<div id="divRight" style="border:1px solid blue;width:200px; height:20px; float:right;">
</div>
编辑
全部。如果所有的html元素都是提前添加的而不是使用clone
。一切安好 。请注意。谢谢。
最佳答案
改用 mouseenter
和 mouseleave
事件,以防止在跨越容器内的边界时触发处理程序:
$(function () {
var foundDiv = $("#divContainer");
foundDiv.mouseenter(function () {
var cloneDiv = $("#divRight").clone();
cloneDiv.attr('id', 'funCudDiv');
$("#divContainer").append(cloneDiv);
$("#divContainer").addClass("canSelectedNodeHover");
}).mouseleave(function () {
$("#divContainer").removeClass("canSelectedNodeHover");
$("#funCudDiv").remove();
});
});
这是一个演示:http://jsfiddle.net/cRnBx/
关于jquery - 动态添加的 div 影响容器 mouseover 和 mouseout 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13621417/