问题越来越强调暗淡

问题描述：

我正在为我的朋友制作一个博客，我似乎无法获得导航的下划线以淡入独立于实际文本，任何想法？问题越来越强调暗淡

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

答

您没有设置在非悬停规则，这是必要的这种类型的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线重新添加到其各自的规则。

问题越来越强调暗淡

相关推荐