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

Question

我有三个div与隐藏的内部div,当你翻转每个div时,它的内部div应该显示,当你推出它时再次隐藏.

例如,我翻转div1,div1内部出现,我推出,div1内部消失.

然而,当我将div1直接从div2移动到div2时,两者都被视为rollout,例如div1 inner消失(应该如此),div2 inner出现(应该如此),但随后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;
                }

Answer 1

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