我正在使用jQuery hover
和mouseout
脚本,但问题是当我在hover
工作时在div
上设置mouseout
时,div
被隐藏,并且持续可见(闪烁)。
如何克服这个问题?
这是我的代码:
<style>
.append_div{
position: absolute;
top: 8%;
display: none;
background-color: pink;
border-right: 0px;
left: 0px;
padding: 30px;
display:none;
}
</style>
<body>
<div class="menu">
Hover Me
</div>
<div class="append_div">
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$('.menu').hover(function(){
$(".append_div").show();
$(".append_div").css({"width":"170px","z-index":"1078"});
});
$( ".menu" ).mouseout(function() {
$(".append_div").hide('slow');
});
</script>
</body>
如果快速尝试问题的原因,您可以使用stop()
和finish()
函数来解决问题。
$(".append_div").css({"width":"170px","z-index":"1078"});
$('.menu').hover(function(){
$( ".append_div" ).finish();
$(".append_div").show();
});
$( ".menu" ).mouseout(function() {
$( ".append_div" ).finish();
$(".append_div").hide('slow');
});
https://jsfiddle.net/63dofz48/16/
对于两种缓慢效果的眼睛更好
如果在悬停和鼠标移动快速发生时问题闪烁,请尝试在隐藏eventsnd_div时设置延迟:
$( ".menu" ).mouseout(function() {
setTimeout(function() {
$(".append_div").hide('slow');
}, 500);
});