JQuery将多个元素悬停在一个函数上

Question

I have three divs with hidden inner divs, when you rollover over each div its inner div should display and when you rollout it hides again.

for example, I rollover div1, div1 inner appears, I rollout, div1 inner disappears.

However when I move my mouse from div1 directly over div2, both are treated as rollout, eg div1 inner disappears (as it should), div2 inner appears(as it should) but then instantly disappears with div1 inner.

Apart from writing separate functions for div1 2 and 3 I'm not sure what to do, any help much appreciated!!

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;
                }

Answer 1

Add a class to the box divs (same class for each)

<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"});
   });
});

Answer 2

在无论哪个div或任何字段，你想提供悬停函数只需调用相同的类名，然后通过引用该类名来触发你的函数。

Answer 3

Try like below... it will help you..

Keep Same class name for all the DIV.. and try the below..

Fiddle Example : 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(); 
});