CSS ul.topnav li a :active

Question

我试图将当前的“事件”链接设置为白色以显示用户所在的页面。我在以前的帖子中看到“一个链接只有在被点击时才会进入 a:active 状态，所以你只能看到几秒钟的变化。你应该寻找一种不同的方式来完成它，比如为选定的菜单项添加一个新的 css 类从你的服务器端脚本。”问:我该怎么做？

我的 CSS 是:

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: transparent;
}

ul.topnav li {
  float: left;
}

ul.topnav li a:link {
  color: black;
  text-align: center;
  padding: 10px 12px;
  text-decoration: none;
  font-size: larger;
  font-family: Arial;
  font-weight: bold;
}

.topnav ul li.current a {
  color: Black;
}

/*
ul.topnav li a:visited {
	color: black;
}
*/
ul.topnav li a:hover:not(.active) {
  color: Aqua;
  text-decoration: none;
  transition: none;
}
l.topnav li a:hover:active {
  color: white;
  text-decoration: underline;
}
ul.topnav li a:active {
  color: white;
  transition: none;
  text-decoration: underline;
}

<ul class="topnav">
  <!--<li><a class="active" href="../index.html">HOME</a></li>-->
  <li> <a href="../index.html">HOME</a></li>
  <li> <a href="../Aboutus.html">ABOUT</a></li>
  <li> <a href="../new.html">NEW</a></li>
  <li> <a href="../Samples.html">PRODUCTS</a></li>
  <li> <a href="../catalog.html">CATALOG</a></li>
  <li> <a href="../search.html">SEARCH</a></li>
  <li> <a href="../distributors.html">DISTRIBUTORS</a></li>
  <li> <a href="../service.html">SERVICE</a></li>
  <li> <a href="../Mailto.html">CONTACT</a></li>
</ul>

希望这些信息对您有所帮助。一段时间以来一直在尝试解决这个问题。

问候，

拉里

Answer 1

您需要更新导航的 html 以包含“当前”/“事件”页面的标识符。这意味着更新您的 .html 页面以将类似 class="active" 的内容添加到表示当前页面的链接。然后，您可以将您的 css 更新为:

ul.topnav li a:hover:not(.active) {
    color: Aqua;
    text-decoration: none;
    transition: none;
}

ul.topnav li a.active:hover,
ul.topnav li a.active {
    color: white;
    transition: none;
    text-decoration: underline;
}