我环顾了 SO 和谷歌，但我还没有找到我的问题的答案(虽然我确实觉得这可能是一个非常常见的问题，但仍然没有运气)。我找到的所有这些都在 jQuery 上，但我不想在没有充分掌握主要 JS 知识的情况下开始使用 jQuery。
基本上，我有一个简单的网站，我现在正在尝试制作导航栏的框架。导航栏将下拉以显示其他选项。我唯一的问题是，当我移出触发下拉菜单的主要元素并进入下拉信息时，如何使下拉菜单保持不变。
我注意到使用 CSS 的 :hover 而不是 JS 更容易和更整洁，但我更喜欢使用 JS，因为我仍然开始学习一点 JS，所以它只是为了获得更多知识。
请忽略我代码中的所有颜色和奇怪的格式，它现在只是一个框架，可以让我看得更清楚。
PS:抱歉，我没有针对调整后的 View 和 IFRAME 优化文本和视觉效果。对不起!
提前致谢! :)
document.getElementById("server").onmouseover = function() {serverMouseOver()};
document.getElementById("server").onmouseout = function() {serverMouseOut()};
function serverMouseOver() {
document.getElementById("serverdropdownbox").style.display = "block";
}
function serverMouseOut() {
document.getElementById("serverdropdownbox").style.display = "none";
}.clearfix {
clear: both;
}
body
{
background-color: rgb(21,14,43);
background-image: url("../images/backgroundimage.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100%;
background-position: center center;
overflow: hidden;
}
#gigalogomainbox
{
float: left;
width: 30vw;
height: 10vw;
overflow: hidden;
transform: skewX(20deg);
margin: 0 0 0 -4vw;
background-color: white;
}
#gigalogobox
{
margin: 0 3vw 0 2vw;
padding: 0 0 0 2vw;
width: 100%;
height: 8vw;
}
#gigalogo
{
width: 80%;
margin: 3vw 2vw 0 0;
height: 7vw;
}
#steamlogomainbox
{
width: 15vw;
height: 10vw;
float: right;
margin: 0 -4vw 0 0;
background-color: white; /*000c21*/
transform: skewX(-20deg);
overflow: hidden;
}
#steamlogobox
{
margin: 0 -2vw 0 3vw;
padding: 0;
width: 100%;
height: 20%;
}
#steamlogo
{
padding: 0 0 0 2vw;
margin: 3vw 0vw 0 0;
transform: skewX(20deg);
height: 7vw;
}
#placeholderbartop
{
float: left;
width: 60%;
margin: 0;
padding: 0;
height: 10vw;
}
#navbarbox
{
clear: both;
display: block;
width: 100%;
height: 5vw;
padding: 2vw 0 0 0;
margin: auto;
}
#navbar, #navbar ul
{
width: 100vw;
height: 5vw;
background-color: green;
margin: auto;
}
#navbar li
{
color: white;
list-style: none;
display: inline-block;
padding: 1vw 3vw 0 3vw;
color: red;
font-size:35px;
}
#serverdropdownbox
{
display: none;
color: white;
background-color: darkblue;
}
#serverdropdowncontent
{
list-style-type: none;
width: 15vw;
margin: 0 0 0 15vw;
transform: skewX(15deg);
}
#serverdropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
.menugradient
{
backround: darkblue;
}
#server
{
background-color: blue;
}
#server:hover #serverdropdownbox
{
display: block;
}
#gigalogomainbox:hover
{
background-color: red
}<!DOCTYPE html>
<html>
<head>
<link href="css/mainframe.css" type="text/css" rel=stylesheet>
<script src="scripts/jquery.js"></script>
</head>
<body>
<!--Giga logo, top left-->
<div id="gigalogomainbox" class="clearfix">
<div id="gigalogobox">
<img id="gigalogo" src="images/gigalogo.png">
</div>
</div>
<!--Steam logo, top right-->
<div id="steamlogomainbox">
<div id="steamlogobox">
<img id="steamlogo" src="images/steamlogo.png">
</div>
</div>
<!--navigation barrrrrr-->
<div id="navbarbox">
<ul id="navbar">
<li>Home</li>
<li id="server">Servers</li>
<li>Community</li>
<li>Store</li>
<li>Download</li>
<li>Contact</li>
</ul>
<div id="serverdropdownbox">
<ul id="serverdropdowncontent">
<a href="serverlist.html"><li>Server List</li></a>
<li>GigaDB</li>
<li>CS:GO</li>
</ul>
</div>
</div>
<script src="scripts/frame.js"></script>
</body>
</html>最佳答案
所以，要解决这个问题，很容易在 jQuery 中解决这个问题。但是在纯 JS 中修复它的方法是为“服务器”内容(li's，a 标签)创建多个 id。然后执行与 JS 中的“服务器”li 相同的操作，但使用您为“服务器”内容创建的那些 ID。此外，您应该在 id serverdropdowncontent 上执行此操作。
祝你好运， 本 A.K.A BlackSky
关于javascript - 使导航栏的下拉菜单停留，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42888097/