代码：
<!DOCTYPE>
<html>
<style>
.topnav {
background-color: white;
}
.topnav a {
color: black;
padding: 14px 16px;
font-size: 17px;
}
.topnav a:hover {
background-color: blue;
color: white;
}
.topnav a.active {
background-color: blue;
color: white;
}
<body>
<div id = 'menu' class = 'topnav'>
<a id = 'inactivate' class = 'active' href = 'first'>First</a>
<a href = 'second'>Second</a>
<a href = 'third'>Third</a>
<a href = 'fourth'>Fourth</a>
</div>
</body>
</style>
</html>
它的作用：
它创建了一个导航栏topnav，它由三个超链接组成：first、second、third和fourth。默认情况下，每个超链接都有黑色字体和白色背景，但first除外，后者有白色字体和蓝色背景。
目标
当用户将鼠标悬停在非first的超链接上时，会使悬停的超链接具有白色字体和蓝色背景，然后将first设置为黑色字体和白色背景。
我尝试过的：我用JavaScript编写了一个脚本
<script>
var element = document.getElementById('inactivate');
element.classList.remove('active');
</script>
我把脚本放在中
<!DOCTYPE>
<html>
<style>
.topnav a:hover {
---
script
---
}
</style>
</html>
然而，它没有起作用。不过，剧本很管用。我只是不知道当超链接悬停时如何运行脚本。
下面向#menudiv添加了一个事件侦听器，并使用事件冒泡捕获鼠标悬停事件。然后，它只记录"；做事；当目标的tagName是A(即它是一个链接(而目标的id不是"inactivate"时，因为您不希望在第一个链接上出现悬停效果。
在下面的代码中，您可以在我有console.log的地方交换出您实际想要执行的内容。
const menu = document.querySelector("#menu");
menu.addEventListener("mouseover", (e) => {
if (e.target.tagName === "A" && e.target.id !== "inactivate") {
console.log("do thing");
}
})<div id = 'menu' class = 'topnav'>
<a id = 'inactivate' class = 'active' href = 'first'>First</a>
<a href='second'>Second</a>
<a href='third'>Third</a>
<a href='fourth'>Fourth</a>
</div>当用户悬停在非第一个超链接上时悬停的超链接有白色字体和蓝色背景，然后它首先设置为黑色字体和白色背景。
可以在没有javascript的情况下使用.topnav:hover a.active:not(:hover),实现
.topnav:hover a.active:not(:hover),
.topnav a {
color: black;
padding: 14px 16px;
font-size: 17px;
background-color: white;
}
.topnav a:hover,
.topnav a.active {
background-color: blue;
color: white;
}<div class="topnav">
<a class="active" href="#">First</a>
<a href="#">Second</a>
<a href="#">Third</a>
<a href="#">Fourth</a>
</div>没那么难，使用JQuery！这里，我在这里做了一个简单的例子
$(document).ready(function() {
$("nav a").hover(function() {
$("nav a").removeClass("active");
$(this).addClass("active");
});
$("nav a").mouseout(function() {
$("nav a").removeClass("active");
$(".first").addClass("active");
});
});a {
color: #000;
font-family: sans-serif;
background: #fff;
transition-duration: 300ms;
text-decoration: none;
padding: 6px 10px;
border-radius: 3px;
}
a.active {
background: blue;
color: #fff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<a href="#" class="first active">First</a>
<a href="#">Second</a>
<a href="#">Third</a>
<a href="#">Fourth</a>
</nav>