jquery悬停在项目卡在无限循环/开始眨眼项目

Question

请参阅下面我的代码。我想要的是：

• 我的所有项目都绝对定位
• 当我将鼠标悬停在物品1，我想项目2，项目3显示
• 当我将鼠标悬停在项目2，我想项目3隐藏
• 当我点击item2时，当item3仍然隐藏时，我执行一些功能

用我的代码如下，如果我将鼠标悬停在item2上，它会开始闪烁item2和item3。

我在做什么错？

的jsfiddle：

http://jsfiddle.net/z9Unk/53/

HTML

<div class="item1"> 
    item1 
</div> 
<div class="item2"> 
    item2 
</div> 
<div class="item3"> 
    item3 
</div> 

CSS：

item1 { 
    position:absolute; 
    width:150px; 
    height:150px; 
    background-color:red; 
    top:5%; 
} 

.item3, .item2 { 
    position:absolute; 
    width:50px; 
    height:50px; 
    background-color:green; 
    top:8%; 
    left:1%; 
    display:none; 
} 

.item3 { 
    top:18%; 
} 

JS：

var item1 = $(".item1"); 
var item2 = $(".item2"); 
var item3 = $(".item3"); 

item1.hover(
    function() { 
     item2.show(); 
     item3.show(); 
    }, 
    function() { 
     item2.hide(); 
     item3.hide(); 
    } 

); 

item2.hover(
    function() { 
     item3.hide(); 
    }, 
    function() { 
    } 

); 

item2.click(
    function() { 
     alert("Perform some function"); 
    } 
); 

Answer 1

<div class="item1"> 
    item1 
    <div class="item2"> 
     item2 
    </div> 
    <div class="item3"> 
     item3 
    </div> 
</div> 

你应该restruct你的HTML

ITEM2超出ITEM1的，所以当你移动项目2，物品1的鼠标离开触发然后触发物品1的的物品1的mouseenter

Answer 2

您需要使用事件侦听器，否则您的代码只能从上到下运行。

Answer 3

增加z索引，或者只是举ITEM2 + 3到其他地方

Answer 4

如果你不想调整你的HTML，你可以写onHover选项其他功能上项目3

item3.hover(
function() { 
    item2.show(); 
    item3.show(); 
}, 
function() { 
} 

）;

http://jsfiddle.net/z9Unk/55/

干杯