Question

假设我的网页中有很多<a></a>标记，每个标记都有不同的颜色。这是一种方法，我可以做一个简单的悬停css代码，如下面，当悬停它的颜色没有改变，或者我必须逐个设置它？

a {
  text-decoration: underline;
}

a:hover {
  color: initial;
}

Answer 1

您实际上并不需要:hover选择器。只需设置特定的<a>代码规则，即可将链接保留为原始颜色。像这样：

＆＃13;

.blue {
  color: blue;
  }

.green {
  color: green;
  }

.red {
  color: red;
  }

.yellow {
  color: yellow;
  }

.purple {
  color: purple;
  }

＆＃13;

<a class="blue" href="alink.html">Click here</a><br/>
<a class="green" href="alink.html">Click here</a><br/>
<a class="red" href="alink.html">Click here</a><br/>
<a class="yellow" href="alink.html">Click here</a><br/>
<a class="purple" href="alink.html">Click here</a><br/>

＆＃13;

如果您希望颜色返回原始颜色（黑色）。然后你就做对了，但只是把!important放在color: initial之后。

＆＃13;

.blue {
  color: blue;
  }

.green {
  color: green;
  }

.red {
  color: red;
  }

.yellow {
  color: yellow;
  }

.purple {
  color: purple;
  }

a:hover {
  
  color: initial !important;
  
  }

＆＃13;

<a class="blue" href="alink.html">Click here</a><br/>
<a class="green" href="alink.html">Click here</a><br/>
<a class="red" href="alink.html">Click here</a><br/>
<a class="yellow" href="alink.html">Click here</a><br/>
<a class="purple" href="alink.html">Click here</a><br/>

＆＃13;

希望这有帮助！

悬停颜色不会改变CSS3

1 个答案: