JQuery悬停多个元素一个功能

Question

我有三个带有隐藏内部 div 的 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;
                }

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