gpt4 book ai didi

javascript - 如何在用 "onmouseover"显示它并将鼠标放在它上面后保持 div 可见

转载 作者:行者123 更新时间:2023-11-28 04:22:46 26 4
gpt4 key购买 nike

我正在尝试做一个菜单,当鼠标悬停在按钮上时菜单会展开(就像在附加的 jsfiddle 中一样)

HTML:

<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" id="menu">
<ul>
<li>
<div id="hover" onmouseover="document.getElementById('stuff').style.opacity = 1.0;" onmouseout="setTimeout(function(){document.getElementById('stuff').style.opacity = 0.0;}, 3000);">
<a href="">Button</a>
</div>
</li>
</ul>

</div>

<div class="col-lg-9 col-md-9 col-sm-6 col-xs-12" id="main">
<div id="stuff">stuff</div>
</div>
</div>
</div>

CSS:

    #stuff {
height: 600px;
width: 100px;
background-color: red;
opacity: 0.0;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}

https://jsfiddle.net/bfkxmghd/2/

菜单显示正常,我使用 setTimeOut 将其关闭延迟 3 秒,但是如果我将鼠标移到 stuff 上,我如何才能让它保持打开状态?分区?我试过使用 onmouseover="document.getElementById('stuff').style.opacity = 1.0; , 但在这种情况下,即使没有将鼠标放在 hover 上,它也会出现首先是 div。

最佳答案

只需要在您保存的超时时间调用clearTimeout。不需要 jQuery。

var timeout

function showMenu () {
clearTimeout(timeout)
document.getElementById('stuff').style.opacity = 1.0;
timeout = setTimeout(function(){document.getElementById('stuff').style.opacity = 0.0;}, 3000);
}

function hideMenu () {
clearTimeout(timeout)
document.getElementById('stuff').style.opacity = 0.0;
}

function keepMenu () {
clearTimeout(timeout)
}

var hover = document.getElementById('hover')
hover.onmouseover = showMenu

var stuff = document.getElementById('stuff')
stuff.onmouseover = keepMenu
stuff.onmouseout = hideMenu
    #stuff {
height: 600px;
width: 100px;
background-color: red;
opacity: 0.0;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" id="menu">
<ul>
<li>
<div id="hover">
<a href="">Button</a>
</div>
</li>
</ul>

</div>

<div class="col-lg-9 col-md-9 col-sm-6 col-xs-12" id="main">
<div id="stuff">stuff</div>
</div>
</div>
</div>

关于javascript - 如何在用 "onmouseover"显示它并将鼠标放在它上面后保持 div 可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42122348/

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