問題越來越強調暗淡

Question

我正在爲我的朋友製作一個博客，我似乎無法獲得導航的下劃線以淡入獨立於實際文本，任何想法？

HTML：

<div class="navlinks"> 
<ul> 
<li><a href="#">Submissions</a></li> 
<li><a href="#"><span class="currentpage">Masthead</span></a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Donate</a></li> 
</ul> 
</div> 

CSS：

.navlinks a:hover { 
border-bottom: 3px solid #CD2626; 
opacity: 1; 
transition: opacity .25s ease-in-out; 
-moz-transition: opacity .25s ease-in-out; 
-webkit-transition: opacity .25s ease-in-out; 
} 
.navlinks a { 
opacity: 0; 
} 

Answer 1

您沒有設置在非懸停規則，這是必要的這種類型的CSS過渡border-bottom。 （這可能不是絕對必要的（不確定），但至少這是我看到它設置的方式）。

此外，要設置在錯誤的地方轉移函數（不應該在:hover規則，很可能只是一種風格的東西），並在錯誤的性質（即，如果你想下劃線褪色在）。您的這個完整的CSS應該是這樣的：

.navlinks a { 
    transition: all .25s ease-in-out; 
    -moz-transition: all .25s ease-in-out; 
    -webkit-transition: all .25s ease-in-out; 

    border-bottom: 3px solid transparent; 
} 

.navlinks a:hover { 
    border-bottom: 3px solid #CD2626; 
} 

如果您還想要透明度改變（即整個文本或縮小褪色），該opacity: 0和opacity: 1線重新添加到其各自的規則。