Question

我使用：after和：在psuedo元素之前将鼠标悬停在导航链接上时有边框。我一直在尝试使用相同的悬停边框效果：active psuedo classe，所以有些人可以告诉我如何做到这一点。这是我的代码：

＆＃13;

nav ul .u {
  position: relative;
  color: f4f4f4;
}
nav ul li a:after,
nav ul li a:before {
  content: " ";
  position: absolute;
  display: block;
  width: 0;
  height: 2px;
  transition: width .2s;
}
nav ul li a:after {
  left: 10%;
  bottom: -5px;
  background-color: #f1c40f;
}
nav ul li a:before {
  right: 10%;
  top: -5px;
  background-color: #f1c40f;
}
nav ul li a:hover {
  color: #F4F4F4;
}
nav ul li a:hover:before,
nav ul li a:hover:after {
  width: 80%;
}
nav ul .active a:after,
nav ul .active a:before {
  content: " ";
  position: absolute;
  display: block;
  width: 0;
  height: 2px;
  transition: width .3s;
}
nav ul .active a:after {
  left: 10%;
  bottom: -5px;
  background-color: #f1c40f;
}
nav ul .active a:before {
  right: 10%;
  top: -5px;
  background-color: #f1c40f;
}

＆＃13;

<nav>
  <ul>
    <li class="active"><a class="u" href="#">Home</a></li>
    <li><a class="u" href="#">About</a></li>
    <li><a class="u" href="#">Specials</a></li>
  </ul>
</nav>

＆＃13;

Answer 1

只需添加

nav ul li a:active {
  color: yellow;
}

给你的CSS。根据以下定义：活动类说，只要用户鼠标点击链接，他就会看到链接的颜色变为黄色。

有关活动类的更多参考，可以通过以下链接：

https://developer.mozilla.org/en-US/docs/Web/CSS/%3Aactive

Answer 2

错误的用法。

请检查以后的定义： :: after是一个伪元素，它允许您从CSS将内容插入页面（不需要在HTML中）。

您可以根据需要使用普通的悬停样式。

：活跃的课程不起作用

2 个答案: