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

问题描述：

我一直在这个事情上停留了一段时间，无法提出解决方案。我有几个我使用class来设计的链接。但是，似乎悬停和：访问状态样式仅适用于第一个链接，即使我专门使用了类来对所有样式进行样式设置。我真的不确定那里的举动。CSS链接：悬停样式仅适用于第一个实例，即使使用类

这里是我的代码：

<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; 
}

答

尝试把:hover的:visited事件之后。而且你还可以添加.contactLinks a:visited:hover所以你一定是徘徊在一个访问过的链接，当你得到期望的结果

如你所知，你可以不设置text-decoration上:visited链接。它与浏览器历史安全原因有关。看到这里>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>

嗨，感谢您的快速响应！这解决了：悬停部分，但我仍然在点击它们之后获得带下划线的链接。刚才我读到，你实际上无法使用文本装饰属性：visited链接。是否有另一种方法来解决这个问题？ – TommyVee

@TommyVee为该问题添加了解决方法。阅读我编辑的答案：D –

谢谢，终于搞定了！ – TommyVee

答

更新片段我粘贴你的代码到codepen，它似乎工作得很好。你在本地或服务器上试过这个吗？您是否试过清理缓存？

@tommyvee yupp它成功地在网上编辑没有任何chnages –

这不是你在这里给答案的方式。等到你得到信贷，所以你可以评论或提供正确的答案 –

我试图在本地。我让悬停部分工作，但我仍然无法摆脱访问链接上的下划线：/ – TommyVee

答

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

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

相关推荐