jquery - jQuery悬停多个元素一个功能

Question

我有三个带有隐藏内部 div 的 div，当您将鼠标悬停在每个 div 上时，它的内部 div 应该显示，而当您再次推出时，它会再次隐藏。

比如我rollover div1，div1 inner出现，我rollout，div1 inner消失。

但是，当我将鼠标从 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"});
   });
});

Answer 2

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

Answer 3

试试下面...它会帮助你..

为所有 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>

查询：

$('.item').hide(); 
$('.divBox').hover(function() { 
    $(this).children('.item').show();     
}, function() { 
    $(this).children('.item').hide(); 
});