jQuery的工具欄懸停閃爍

Question

請看看我的例子 - http://jsfiddle.net/5aKt8/3/

我想顯示相應的工具欄時，用戶將鼠標懸停每個盒子..它工作得很好，除了當用戶將鼠標懸停在工具欄本身上，它則開始閃爍。我認爲懸停在工具欄上觸發主機div上的鼠標事件，該事件啓動顯示/隱藏循環。不知道如何避免這種行爲..任何想法？

CSS

.box{ 
     display:block; 
     border: 1px solid green; 
     max-height: 50px; 
     margin: 5px; 
     box-shadow: 2px 2px 2px #000000; 
     overflow: hidden; 
     font-size: 80%; 
     position: relative; 
     color: #000; 
     padding:10px; 
} 
.toolbar{ 
     font-size: 70%; 
     position: absolute; 
     top: 0px; 
     right:0px; 
     padding: 3px; 
     color: blue; 
     display:none; 
     background: #aaa; 
} 

HTML

<div style="padding:10px"> 
<ul> 
    <li class="box"> 
     <div class="toolbar">toolbar</div> 
     some conetent 
    </li> 
    <li class="box"> 
     <div class="toolbar">toolbar</div> 
     some conetent 
    </li> 
</ul> 
</div> 

的Javascript

$(function(){ 
    $('.box').mouseover(function(e){ 
     $(e.target).find('.toolbar').show(); 
    }).mouseout(function(e){ 
     $(e.target).find('.toolbar').hide(); 
    }); 
}); 

Answer 1

使用mouseenter()和相反，停止閃爍。

$(function(){ 
    $('.box').mouseenter(function(e){ 
     $(e.target).find('.toolbar').css({display:'block'}); 
    }).mouseleave(function(e){ 
     $(e.target).find('.toolbar').css({display:'none'}); 
    }); 
}); 

jQuery jsFiddle here.

---

雖然，你實際上並不需要jQuery來做到這一點 - 它可以在純CSS來實現：

.box:hover .toolbar { 
    display:block; 
} 

Pure CSS jsFiddle here.

Answer 2

http://jsfiddle.net/mohammadAdil/5aKt8/5/

使用mouseenter和mouseleave

$(function(){ 
    $('.box').mouseenter(function(e){ 
     $(e.target).find('.toolbar').css({display:'block'}); 
    }).mouseleave(function(e){ 
     $(e.target).find('.toolbar').css({display:'none'}); 
    }); 
}); 

Answer 3

你並不需要的JavaScript的。只需添加這個CSS：

.box:hover > .toolbar{ 
    display: block; 
} 

Answer 4

嘗試使用.hover（）函數而不是鼠標懸停，這個腳本應該工作，而不是那個在你的小提琴：

$(function(){ 
    $('.box').hover(function(e){ 
     $(e.target).find('.toolbar').css({display:'block'}); 
    }, function(e){ 

     $(e.target).find('.toolbar').css({display:'none'}); 

    }); 
}); 

瀏覽器將火鼠標移開時你懸停在工具提示上，因此它會閃爍。

此致敬禮。 喬納斯