对于一个学校元素，我正在制作一个带有导航栏的网站并且我有导航栏，这样当我在页面上时，链接会在导航栏中突出显示。但是，当我将鼠标悬停在那个事件栏上时，它会因为我的非事件链接的 css 上的 .hover 属性而改变颜色。我该如何阻止这种情况发生？
我试过了
li a:hover .active {
background-colour: DarkBlue;
}
但这似乎行不通。我想不出任何其他可能有用的方法。
这是我的代码。
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: Gray;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
li a:hover:not(.active) {
background-color: 111;
}
.active {
background-color: DarkBlue;
}<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<ul>
<li><a class="active">Home</a></li>
<li><a href="life-on-iss.html">Life on the ISS</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Details</a>
<div class="dropdown-content">
<a href="why-was-it-built.html">Why it was built.</a>
<a href="what-skills-do-I-need-to-work-here.html">What skills do I need to work here?</a>
<a href="what-we-have-learnt.html">What we have learnt.</a>
</div>
<li style="float:right"><a class="activefloatright" href="#about">Assignment</a></li>
</li>
</ul>
</body>
</html>有人能告诉我解决这个问题的正确代码吗？希望我对这个请求已经足够清楚了。谢谢!
最佳答案
li .active:hover {
background-colour: DarkBlue;
}
关于html - 当我将鼠标悬停在导航栏上时，我不知道如何阻止它突出显示我的事件链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57799333/