jquery - jQuery工具栏悬停闪烁

Question

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

我想在用户悬停每个框时显示适当的工具栏。它工作正常，除非用户将鼠标悬停在工具栏本身上，然后它开始闪烁。我认为将鼠标悬停在工具栏上会触发托管 div 上的 mouseout 事件，该事件会启动显示/隐藏循环。不知道如何避免这种行为..有什么想法吗？

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()andmouseleave()代替，它会停止闪烁。

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

jQuery jsFiddle 在这里。

---

虽然，您实际上并不需要 jQuery 来执行此操作 - 它可以在纯 CSS 中完成：

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

纯 CSS jsFiddle 在这里。

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

    });
});

当您将鼠标悬停在工具提示上时，浏览器将触发 mouseout，因此它会闪烁。

最好的祝福。乔纳斯