jQuery工具栏悬停闪烁答案

【问题标题】：jQuery toolbar hover flickeringjQuery工具栏悬停闪烁
【发布时间】：2013-04-30 11:27:29
【问题描述】：

我想在用户悬停每个框时显示适当的工具栏。它工作正常，除非用户将鼠标悬停在工具栏本身上，然后它开始闪烁。我认为将鼠标悬停在工具栏上会触发托管 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();
    });
});

【问题讨论】：

标签： jquery css

【解决方案1】：

请改用mouseenter() 和mouseleave()，这样可以停止闪烁。

$(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.

【讨论】：

【解决方案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'});
    });
});

【讨论】：

【解决方案3】：

您根本不需要 JavaScript。只需添加这个 CSS：

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

【讨论】：

【解决方案4】：

尝试使用 .hover() 函数而不是鼠标悬停，这个脚本应该可以代替你的小提琴：

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

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

    });
});

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

最好的问候。乔纳斯

【讨论】：