Question

Here is my code .Please review it . The problem drive me mad is why the mouseout event was triggered if I move the mouse to cloned div funCudDiv even it is in divContainer.
so , if you hover on the funCudDiv you will see the all the things are flicker.

Please help me . thanks.

<!-- 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>

Edit

All. If all the html elements is added in advance instead of using clone. Everything is fine . Please note that .thanks.

Answer 1

Use mouseenter and mouseleave events instead, to prevent the handlers from being triggered when you cross boundaries within the container:

$(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();
    });
});

Here is a demonstration: http://jsfiddle.net/cRnBx/