Question

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

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

    });
});

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

祝你好运。纳斯

jQuery工具栏悬停闪烁

4 个答案: