Question

我正在尝试在链接处于活动状态时显示悬停时出现的蓝线。我正在构建一个具有几个不同视图的角度应用程序，当用户在视图上处于活动状态时，我希望我在悬停时创建的下划线，以便在选择链接时保持不变。我假设它需要一个活跃的伪选择器，但是当我将它添加进去时，它会取消悬停。对此有任何建议将不胜感激。

这是我目前的代码：

＆＃13;

footer {
  width: 100%;
  margin-top: 150px;
  padding: 0 60px;
  font-family: "Lora", serif;
}
footer a {
  text-decoration: none;
  color: #ABABAB;
}
a:after {
  content: '';
  display: block;
  margin: auto;
  height: 3px;
  width: 0px;
  background: transparent;
  transition: width .5s ease, background-color .5s ease;
}
a:hover:after {
  width: 100%;
  background: #00FFE9;
}
.nav-footer {
  list-style: none;
  padding: 0;
  border-top: solid 2px #DEDEDE;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 15px;
}

＆＃13;

<footer>
  <nav class="nav-footer">
    <a ui-sref-active="active" ui-sref="friends">View Friends</a>
    <a ui-sref-active="active" ui-sref="friend-search">Find Friends</a>
    <a ui-sref-active="active" ui-sref="update">Update Profile</a>
  </nav>
</footer>

＆＃13;

这是jsfiddle：https://jsfiddle.net/uw8fqbyr/

Answer 1

UI-SREF活性=＆＃34;有源＆＃34;指令添加＆＃34;活跃＆＃34;当选定视图处于活动状态时，将css类添加到标记。

您应该添加此css规则

a.active:after {
  width: 100%;
  background: #00FFE9;
}

Answer 2

与

a:active:after {}

您可以为锚点启用文本修饰。

Answer 3

尝试 a:active{}

访问了<a>代码

a:visited{}

Answer 4

尝试以下

footer {
  width: 100%;
  margin-top: 150px;
  padding: 0 60px;
  font-family: "Lora", serif;
}

footer a {
  text-decoration: none;
  color: #ABABAB;
}

a:after {
  content: '';
  display: block;
  margin: auto;
  height: 3px;
  width: 0px;
  background: transparent;
  transition: width .5s ease, background-color .5s ease;
}

a:hover:after {
  width: 100%;
  background: #00FFE9;
}
a.active:after {
  width: 100%;
  border-bottom: 3px solid #00FFE9;
}

.nav-footer {
  list-style: none;
  padding: 0;
  border-top: solid 2px #DEDEDE;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 15px;
}

<footer>
        <nav class="nav-footer">
			<a ui-sref-active="active" ui-sref="friends">View Friends</a>
		  <a class="active" ui-sref-active="active" ui-sref="friend-search">Find Friends</a>
			<a ui-sref-active="active" ui-sref="update">Update Profile</a>
		</nav>
  </footer>

Answer 5

添加以下代码链接永远不会在active州显示下划线 a:active { text-decoration: none; }

CSS伪选择器：伪后激活：悬停

5 个答案: