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

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>

JQuery：

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

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

3 个答案: