3

内部 div が非表示の 3 つの div があります。各 div をロールオーバーすると、その内部 div が表示され、ロールアウトすると再び非表示になります。

たとえば、div1 をロールオーバーすると、div1 内部が表示され、ロールアウトすると、div1 内部が非表示になります。

ただし、マウスを div1 から div2 の上に直接移動すると、両方がロールアウトとして扱われます。たとえば、div1 の内部が (本来あるべき姿で) 消え、div2 の内部 (本来あるべき姿) が表示されますが、div1 の内部で即座に消えます。

div1 2 と 3 の別々の関数を書く以外に、何をすべきかわかりません。どんな助けも大歓迎です!!

jsfiddle.net/user1688604/UZpEH/3

var box = $("#box1,#box2,#box3");
var inner = $(".item");


$(box).hover(function() {
    $(this).find(inner).stop(true,true).css({"left":"20px"}).animate({"top":"-10px", "opacity": "1"},400);

}, function() {
    $(this).find(inner).stop(true,true).animate({"top":"-20px", "opacity": "0"},400, function() {
        $(inner).css({"left":"-9999px", "top":"0"});
        });
});



<div id="box1">
<div class="item"></div>
</div>

#box1, #box2, #box3 {
            width: 300px;
            float: left;
            margin-right: 20px;
            position: relative;
            }


            .item {
                width: 151px;
                height: 49px;
                padding: 5px 10px 0;
                opacity: 0;
                position: absolute;
                    top: 0;
                    left: -9999px;
                }
4

3 に答える 3

6

ボックスの div にクラスを追加します (それぞれに同じクラス)

<div id="box1" class="box">
    <div class="item"></div>
</div>

jQuery

$(".box").hover(function(){
   $(this).find(".item").stop(true,true).css({"left":"20px"}).animate({"top":"-10px", "opacity": "1"},400);
},function(){
   $(this).find(".item").animate({"top":"-20px", "opacity": "0"},400, function() {
       $(this).css({"left":"-9999px", "top":"0"});
   });
});
于 2013-02-20T14:43:03.247 に答える
0

以下のように試してください...それはあなたを助けます..

すべてのDIVで同じクラス名を維持し、以下を試してください。

フィドルの例： http： //jsfiddle.net/RYh7U/96/

HTML：

<div class="divBox">
    Show Div1
<div class="item">
Div 1    
</div>
</div>

<div class="divBox">
    Show Div 2
<div class="item">
    Div 2

</div>
</div>

<div class="divBox">
    Show Div 3
<div class="item">    
    Div 3
</div>
</div>

JQuery： 

$('.item').hide(); 
$('.divBox').hover(function() { 
    $(this).children('.item').show();     
}, function() { 
    $(this).children('.item').hide(); 
});
于 2013-02-20T15:02:20.520 に答える
0

どちらの div または任意のフィールドでも、同じクラス名でホバー関数を呼び出してから、そのクラス名を参照して関数をトリガーします。

于 2013-02-20T14:43:02.327 に答える