javascript - divjqueryにカーソルを合わせる

Question

これが私のスクリプトです：

  <body>
    <div id ="mainCategory" class='fade'>
        Category</div>
    <div id="divSubCategory">
        Category1
        <br />
        Category2
    </div>
    <script type="text/javascript">
        $("div").hover(
            function () {
                $(this).append($("#divSubCategory").html());
            },
            function () {
                $("#divSubCategory").remove();
            }
         );
        $("#divSubCategory.fade").hover(function () { $(this).fadeOut(100); $(this).fadeIn(500); });

    </script>
</body>

mainCategoryホバーでdivSubCategoryを表示および非表示にします。しかし、それは機能しません。何を追加すればよいですか？

score 8 · Accepted Answer

$(document).ready(function(){
    $('#mainCategory').bind('mouseenter', function() {
        $('#divSubCategory').fadeIn();
    });
    $('#mainCategory').bind('mouseleave', function() {
        $('#divSubCategory').fadeOut();
    });
});

score 2 · Accepted Answer

問題は、あなたが使用していることです.html()。これにより、内側のhtmlがコピーされます（外側<div id="divSubCategory"></div>のビットではなく、真ん中のビットだけです。

このため$('#divSubCategory').remove()、HTML 内の実際の div を削除すると、上の div に移動した HTML は削除されません。

display: noneあなたが持っていると仮定すると#divSubCategory、そのdivからのテキストが最初のdivに追加され、マウスアウトしても消えません（2番目の（非表示の）divは削除されますが）。

とにかくこれを回避する方法は、を使用することclone()です。私はあなたのためにフィドルをします：

http://jsfiddle.net/fZZu5/1/

フェードも修正しました。

編集:これは、表示div#divSubCategoryするdiv#mainCategory前にに移動し、マウスアウトするとそこから完全に削除されます-これは、コードからやりたいと思ったことです。ニックスは、それを表示したり隠したりするだけです。あなたが望むものに応じて、これらの答えは両方とも正しいです。:)

score 1 · Accepted Answer

これはあなたの要件に100％対応しています：

これを確認してください：http://jsfiddle.net/ZWqnk/8/

score -3 · Accepted Answer

document.ready（）関数内にコードをラップします

$(document).ready(function(){
   // Your code here
 });

javascript - divjqueryにカーソルを合わせる

4 に答える 4

Related

Reference