“鼠标悬停时”状态显示div；更改区域，使 div 保持显示
我不会编写 Javascript，但我有一个要添加到网页中的代码片段。目前，我的代码有一个鼠标悬停将显示一个隐藏的 div。但是，隐藏 div 中的导航会在用户尝试单击链接时立即消失，因为用户需要将鼠标从原始触发器移开才能到达导航。
这是我的 Javascript：
<script language="JavaScript">
function toggle(id) {
var state = document.getElementById(id).style.display;
if (state == 'block') {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
</script>
这是我的 HTML：
<nav>
<ul>
<li class="ovr"><a href="#" onmouseover="toggle('hidden1');" onmouseout="toggle('hidden1');">Overview</a></li>
</ul>
</nav>
<div class="container">
<div id="hidden1">
<ul>
<li><a href="#description">Description</a></li>
<li><a href="#objectives">Objectives</a></li>
<li><a href="#semestertopics">Semester Topics</a></li>
<li><a href="#greenteaching">Green Teaching</a></li>
<li><a href="#howtodowellinthiscourse">How to Do Well in this Course</a></li>
</ul>
</div>
如果我的问题已经得到解答，那么我们将不胜感激 - 我没有所有正确的词汇来进行正确的搜索。
谢谢你！
I cannot write Javascript but I have a snippet that I'm adding into a web page. Currently, my code has a mouseover that will reveal a hidden div. However, there is navigation in the hidden div that will immediately disappear as the user tries to click on a link, as the user needs to move their mouse away from the original trigger to reach the navigation.
Here is my Javascript:
<script language="JavaScript">
function toggle(id) {
var state = document.getElementById(id).style.display;
if (state == 'block') {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
</script>
Here is my HTML:
<nav>
<ul>
<li class="ovr"><a href="#" onmouseover="toggle('hidden1');" onmouseout="toggle('hidden1');">Overview</a></li>
</ul>
</nav>
<div class="container">
<div id="hidden1">
<ul>
<li><a href="#description">Description</a></li>
<li><a href="#objectives">Objectives</a></li>
<li><a href="#semestertopics">Semester Topics</a></li>
<li><a href="#greenteaching">Green Teaching</a></li>
<li><a href="#howtodowellinthiscourse">How to Do Well in this Course</a></li>
</ul>
</div>
If my question has already been answered, a pointer in the right direction would be much appreciated - I don't have all the right vocabulary to do the correct searches.
Thank you!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我最终回答了我自己的问题。为了在用户滚动隐藏的 div 时使其保持打开状态，并在不再需要它时使其再次消失，我只是向隐藏的 div 添加了“onmouseover”和“onmouseout”函数。
谢谢您的宝贵时间！
I ended up answering my own question. To keep the hidden div open when the user scrolled over it and to have it disappear again when they no longer needed it, I simply added 'onmouseover' and 'onmouseout' functions to the hidden divs.
Thank you for your time!