2

別のdivにマウスオーバーした後にdivを表示するdivjQueryコードを作成しようとしています！

jQuery：

$(document).ready(function() {
    $('.pic').mouseover(function() {
        $('.rank').fadeOut(200);        
        $(this).next('.rank').fadeIn(400);   
    });

    $("div.rank").hide();
});​

HTML：

<div class="pic">Mouse Over</div>
<div class="rank">Show Somthing</div>​

デモ： http： //jsfiddle.net/CaMwL/

ここで、問題は、このコードにmouseoutイベントを追加する必要があることです。マウスを移動したときに、divを非表示にしたいのです。そして、私はそれをどのように行うことができるのかわかりません！

4

5 に答える 5

2

これを試してください：http：//jsfiddle.net/633hD/1/

APIをチェーンできます：http：.mouseout //api.jquery.com/mouseout/

それが原因に合うことを願っています:)

コード

$(document).ready(function() {
    $("div.rank").hide();

    $('.pic').mouseover(function() {
        $('.rank').fadeOut(200);        
        $(this).next('.rank').fadeIn(400);   
    }).mouseout(function() {
           $("div.rank").hide();
    });
});​
于 2012-10-09T04:16:03.973 に答える
2

どういう意味ですか：

$(document).ready(function() {
    $('.pic').hover(
        function() {
            $('.rank').fadeOut(200);        
            $(this).next('.rank').fadeIn(400);   
        },
        function() {
            $('.rank').fadeIn(400);        
            $(this).next('.rank').fadeOut(200);   
        });

    $("div.rank").hide();
});
于 2012-10-09T04:16:20.433 に答える
1

追加するだけ

$(document).ready(function() {
$('.pic').mouseout(function() {
    $("div.rank").hide();
});   
});

また、onmouseover属性とonmouseout属性をdiv要素に追加し、jqueryを使用して値をjavascript関数に設定することもできます。

于 2012-10-09T04:15:34.333 に答える
1

これを試して

$('.pic').mouseout(function() {
    $("div.rank").hide();
});

jsfiddleを見つける http://jsfiddle.net/CaMwL/5/

于 2012-10-09T04:15:58.297 に答える
1 
$(document).ready(function() {
    $('.pic').mouseover(function() {
        $('.rank').fadeOut(200);        
        $(this).next('.rank').fadeIn(400);   
    });

     $('.pic').mouseout(function() {

         $("div.rank").hide();   
    });


});
于 2012-10-09T04:16:59.463 に答える