gpt4 book ai didi

javascript - 同时在 div 和 mouseout 上使用 hover

转载 作者:行者123 更新时间:2023-11-28 01:06:00 26 4
gpt4 key购买 nike

我正在使用 jQuery hovermouseout 脚本,但问题是当我在 div 上设置 hover 时当 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/

或双慢效果对眼睛更好

https://jsfiddle.net/63dofz48/10/

关于javascript - 同时在 div 和 mouseout 上使用 hover,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52354055/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com