Question

我已经被困在这件事上一段时间了，并且无法提出解决方案。我有一些我使用类设置的链接。但是，似乎：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;
}

Answer 1

尝试在:hover事件之后放置:visited。您还可以添加.contactLinks a:visited:hover，这样您就可以确定将鼠标悬停在已访问的链接上可获得所需的结果

如您所知，您无法在text-decoration个链接上设置:visited。它与浏览器历史记录安全性有关。看到这里＆gt; Privacy visited links

您可以使用border-bottom来模拟下划线。请参阅下面的更新代码段

.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>

Answer 2

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

Answer 3

这是因为“href =”＃“”。将其更改为“href =”#something“”

CSS链接：悬停样式仅适用于第一个实例，即使使用类也是如此

3 个答案: