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

來源

2017-07-31 TommyVee

嘗試把: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>

來源

2017-07-31 07:18:37

嗨，感謝您的快速響應！這解決了：懸停部分，但我仍然在點擊它們之後獲得帶下劃線的鏈接。剛纔我讀到，你實際上無法使用文本裝飾屬性：visited鏈接。是否有另一種方法來解決這個問題？ – TommyVee

@TommyVee爲該問題添加了解決方法。閱讀我編輯的答案：D –

謝謝，終於搞定了！ – TommyVee

更新片段我粘貼你的代碼到codepen，它似乎工作得很好。你在本地或服務器上試過這個嗎？您是否試過清理緩存？

來源

2017-07-31 07:20:33

@tommyvee yupp它成功地在網上編輯沒有任何chnages –

這不是你在這裏給答案的方式。等到你得到信貸，所以你可以評論或提供正確的答案 –

我試圖在本地。我讓懸停部分工作，但我仍然無法擺脫訪問鏈接上的下劃線：/ – TommyVee

-3

這是因爲「href =」＃「」。將其更改爲「href =」#something「」

來源

2017-07-31 07:24:00 cornel

CSS鏈接：懸停樣式僅適用於第一個實例，即使使用類

回答

相關問題