Question

这是我的代码。请查看它。这个问题让我很生气，因为如果我将鼠标移动到克隆的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。一切都好。请注意。谢谢。

Answer 1

改为使用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/

动态添加的div会影响容器鼠标悬停和mouseout事件

1 个答案: