Question

我想更改为所选链接的红色。

例如，我单击链接文本狗，颜色将变为红色，因为它当前已被选中。如果我点击链接文本cat，颜色将变为红色，链接文本狗将返回默认链接颜色。

HTML

<ul>
   <li> <a href="#"> dog </a> </li> 
   <li> <a href="#"> cat </a> </li>

</ul>

CSS

??

Answer 1

您可以使用:focus伪类。

：焦点CSS伪类在元素获得焦点时应用，可以是用户使用键盘选择焦点或使用鼠标激活（例如表单输入）。

a:focus {
  color: red;
}

<ul>
  <li> <a href="#"> dog </a> </li>
  <li> <a href="#"> cat </a> </li>
</ul>

但是，如果您想要点击页面上的其他位置时链接保持红色，那么您可以使用js

$('li').click(function() {
  $(this).siblings().find('a').removeClass('focus');
  $(this).find('a').addClass('focus');
});

.focus {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li> <a href="#"> dog </a> </li>
  <li> <a href="#"> cat </a> </li>
</ul>

Answer 2

＆＃13;

a:focus {
  color: red;
}

＆＃13;

<ul>
  <li> <a href="#"> dog </a> </li>
  <li> <a href="#"> cat </a> </li>
</ul>

＆＃13;

Answer 3

您可以使用：visited选择器设置所有访问过的文档链接的样式。查看http://www.w3schools.com/cssref/sel_visited.asp

如何更改活动链接的颜色？

3 个答案: