jQuery的工具栏悬停闪烁

问题描述：

请看看我的例子 - http://jsfiddle.net/5aKt8/3/jQuery的工具栏悬停闪烁

我想显示相应的工具栏时，用户将鼠标悬停每个盒子..它工作得很好，除了当用户将鼠标悬停在工具栏本身上，它则开始闪烁。我认为悬停在工具栏上触发主机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(); 
    }); 
});

答

使用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.

答

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

非常感谢.... – Johny 2013-04-30 11:58:16

答

你并不需要的JavaScript的。只需添加这个CSS：

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

答

尝试使用.hover（）函数而不是鼠标悬停，这个脚本应该工作，而不是那个在你的小提琴：

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

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

    }); 
});

浏览器将火鼠标移开时你悬停在工具提示上，因此它会闪烁。

此致敬礼。乔纳斯

jQuery的工具栏悬停闪烁

相关推荐