jquery懸停在項目卡在無限循環/開始眨眼項目

請參閱下面我的代碼。我想要的是：jquery懸停在項目卡在無限循環/開始眨眼項目

我的所有項目都絕對定位
當我將鼠標懸停在物品1，我想項目2，項目3顯示
當我將鼠標懸停在項目2，我想項目3隱藏
當我點擊item2時，當item3仍然隱藏時，我執行一些功能

用我的代碼如下，如果我將鼠標懸停在item2上，它會開始閃爍item2和item3。

我在做什麼錯？

的jsfiddle：

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

來源

2013-02-22 gaurav jain

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

你應該restruct你的HTML

ITEM2超出ITEM1的，所以當你移動項目2，物品1的鼠標離開觸發然後觸發物品1的的物品1的mouseenter

來源

2013-02-22 00:46:41

感謝...我應該意識到這點。 – 2013-02-22 00:51:41

您需要使用事件偵聽器，否則您的代碼只能從上到下運行。

來源

2013-02-22 00:46:21 Chris

-1

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

來源

2013-02-22 00:47:38 user1487380

如果你不想調整你的HTML，你可以寫onHover選項其他功能上項目3

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

）;

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

乾杯

來源

2013-02-22 01:01:27

jquery懸停在項目卡在無限循環/開始眨眼項目

回答

相關問題