2

これが私のコードです。確認してください。私を怒らせる問題は、マウスをクローンされたdivに移動した場合に、マウスアウトイベントがトリガーされた理由funCudDivです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。すべて順調 。.thanksに注意してください。

4

1 に答える 1

3

mouseenter代わりにandイベントを使用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 に答える