我环顾四周和谷歌，但我还没有找到我的问题的答案（虽然我觉得这可能是一个非常常见的问题，无论如何仍然没有运气）。我发现的所有这些都在 jQuery 上，但我不想在没有掌握足够的主要 JS 知识的情况下启动 jQuery。
基本上，我有一个简单的网站，我现在正在尝试制作导航栏的框架。导航栏将下拉以显示其他选项。我唯一的问题是当我移出主元素时如何使下拉菜单保持不变，这会触发下拉菜单并进入下拉信息。
我注意到使用 CSS:hover而不是 JS更容易、更整洁，但我更喜欢使用 JS，因为我仍然开始学习一点点 JS，所以只是为了获得更多的知识。
请忽略我代码中的所有颜色和奇怪的格式，它现在只是一个框架，可以让我看到更好的东西。
PS：抱歉，我没有针对调整后的查看和框架优化文本和视觉效果。对不起！
提前致谢！:)
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 上执行此操作。
祝你好运，Ben AKA BlackSky
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句