2

这是我的代码。请查看它。让我发疯的问题是为什么如果我将鼠标移动到克隆的 divfunCudDiv即使它位于divContainer. 所以，如果你将鼠标悬停在 上，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. 一切安好 。请注意。谢谢。

4

1 回答 1

3

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

于 2012-11-29T08:18:28.710 回答