我正在尝试学习如何使用 JavaScript 编程，因为我对 Java、HTML 和 CSS 有相当扎实的了解。我已经使用 bootstrap 设计了一个网站来玩，但我已经卡住了。我的目标是使用纯 JavaScript
更改导航栏元素的背景颜色 
我可以使用 jQuery 来做到这一点，但我需要知道如何使用 JavaScript 编程，因为它有助于掌握这项技能。经过研究，我能看到的实现是 HTML 元素的 mouseover 属性和 getElementsByClassName/getElementsById。
当我自己实现它们时，我似乎一点运气都没有。我想将我的 JavaScript 保存在一个外部文件中，这是另一个困难。我似乎无法一次选择所有元素，更不用说设置它们的样式了。
这是我的 html(使用 Bootstrap 4 和一些自定义样式):
<!DOCTYPE = html>
<html lang = "en">
<head>
<title>Testing Styles</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Julius+Sans+One|Quicksand|Rubik" rel="stylesheet">
</head>
<body>
<heading>
<div class = "Jumbotron">
<h1 class = "display-2">The Header</h1>
<p class = "lead subtext"> And Subtext about the header</p>
</div>
</heading>
<nav class = "mx-auto bg-dark">
<div class = "container-fluid">
<ul class = "nav justify-content-center">
<li class = "nav-item active" id = "temp">
<a class = "nav-link text-light" href="#">Homepage</a>
</li>
<li class = "nav-item active" id = "temp">
<a class = "nav-link text-light" href="#">Posts</a>
</li>
<li class = "nav-item active" id = "temp">
<a class = "nav-link text-light" href="#">Report A Problem</a>
</li>
</ul>
</div>
</nav>
<script src= "JS/scripts.js"></script>
</body>
</html>
JavaScript:
document.getElementsByClassName("nav-link").style.color = "blue";
将颜色设置为蓝色只是测试选择是否有效，而不是我的最终目标。当我刷新页面时没有任何反应。我已确认我正确链接了我的 JS 文件，因为 alert() 有效。
最佳答案
您快完成了...您得到的是要循环的集合...
var N=document.getElementsByClassName("nav-link");
for(var i=0; i<N.length; i++){ N[i].style.color = "blue"; }
关于javascript - 在 JavaScript 中实现鼠标悬停功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48392424/