0

对于一个学校项目，我正在制作一个带有导航栏的网站，并且我有导航栏，这样当我在页面上时，导航栏中的链接会突出显示。但是，当我将鼠标悬停在该活动栏上时，由于我.hover在我的 CSS 上用于非活动链接的属性，它会改变颜色。我该如何阻止这种情况发生？

我试过了

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>

有人能告诉我解决这个问题的正确代码吗？希望我对这个请求已经足够清楚了。谢谢！

4

1 回答 1

0 
li .active:hover {
   background-colour: DarkBlue;
}
于 2019-09-05T06:11:50.157 回答