Проблемы с получением подчеркивания, чтобы исчезнуть в

Question

Я делаю блог для своего друга, и я не могу заставить подчеркивание на navlinks исчезать независимо от фактического текста, любых идей?

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

Вы не устанавливая border-bottom на правило, не парения, которое необходимо для CSS перехода этого типа. (Это может быть не обязательно (неуверенно), но, по крайней мере, так я его и видел).

Кроме того, вы устанавливаете функцию перехода в неправильном месте (не должно быть в :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 линии их соответствующих правил ,