CSS 链接：悬停样式仅适用于第一个实例，即使使用类答案

【问题标题】：CSS link:hover style only applies to the first instance even with using classCSS 链接：悬停样式仅适用于第一个实例，即使使用类
【发布时间】：2018-01-06 15:39:14
【问题描述】：

我在这件事上被困了一段时间，无法想出解决方案。我有一些使用类设置样式的链接。但是，似乎 :hover 和 :visited 状态样式仅适用于第一个链接，即使我专门使用类来设置所有它们的样式。我真的不确定问题在哪里。

这是我的代码：

<div class="container">
<div class="row">
  <div class="col-md-6 push-md-3 max-auto main animsition">
    <h3 class="text-center">Contact <span class="dev">Me</span></h3>
    <p class="contactLinks"><a href="mailto:#"><i class="fa fa-envelope" aria-hidden="true"></i> - Email me</a></p>
    <p class="contactLinks"><a href="#" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i> - Facebook</a></p>
    <p class="contactLinks"><a href="#" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i> - Twitter</a></p>
    <p class="contactLinks"><a href="#" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i> - LinkedIn</a></p>
  </div>
</div>
</div>

CSS：

.main > h3 {
  padding-bottom: 30px;
}

.contactLinks a {
  font-size: 150%;
  color: #262626; 
}

.contactLinks a:hover {
  color: #6E8A71;
  text-decoration: none;
}

.contactLinks a:visited {
  color: #262626;
  text-decoration: none;
}

【问题讨论】：

标签： html css hyperlink hover visited

【解决方案1】：

尝试将:hover 放在:visited 事件之后。您还可以添加.contactLinks a:visited:hover，这样您就可以确保将鼠标悬停在访问过的链接上时，您会得到想要的结果

如您所知，您不能在:visited 链接上设置text-decoration。这与浏览器历史记录安全原因有关。看这里>Privacy visited links

您可以改用border-bottom 来模拟下划线。请参阅下面的更新 sn-p

.main > h3 {
  padding-bottom: 30px;
}

.contactLinks a {
  font-size: 150%;
  color: #262626; 
  text-decoration: none;
  border-bottom:1px solid black;
}



.contactLinks a:visited {
  color: #262626;
  border-bottom:1px solid transparent;
  
}

.contactLinks a:hover,.contactLinks a:visited:hover{
  color: #6E8A71;
  border-bottom:1px solid transparent;
}

<div class="container">
<div class="row">
  <div class="col-md-6 push-md-3 max-auto main animsition">
    <h3 class="text-center">Contact <span class="dev">Me</span></h3>
    <p class="contactLinks"><a href="mailto:#"><i class="fa fa-envelope" aria-hidden="true"></i> - Email me</a></p>
    <p class="contactLinks"><a href="#" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i> - Facebook</a></p>
    <p class="contactLinks"><a href="#" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i> - Twitter</a></p>
    <p class="contactLinks"><a href="#" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i> - LinkedIn</a></p>
  </div>
</div>

【讨论】：

您好，感谢您的快速回复！这修复了 :hover 部分，但单击它们后我仍然得到带下划线的链接。刚才我读到您实际上不能在 :visited links 上使用 text-decoration 属性。还有其他方法可以解决这个问题吗？
@TommyVee 为该问题添加了解决方法。阅读我编辑的答案：D

【解决方案2】：

这是因为"href="#""。将其更改为 "href = "#something""

【讨论】：

【解决方案3】：

我将您的代码粘贴到 codepen 中，它似乎工作得很好。你是在本地主机还是服务器上尝试这个？您是否尝试过清理缓存？

【讨论】：

@tommyvee yupp 它在在线编辑器中运行良好，没有任何更改
这不是你在这里给出答案的方式。等到你得到信用，这样你就可以发表评论或提供正确的答案
我正在本地尝试这个。我让悬停部分工作，但我仍然无法摆脱访问链接上的下划线：/