Question

我有一个简单的fadein css ...我喜欢它，所以当你将鼠标悬停在文本上时，边框底部会淡入。但是，当我悬停时，文本会短暂消失，然后渐渐淡入边框，所以它闪烁着。如何获取它以使文本在悬停时保持不变，只有边框淡入？

CSS

.nav li a:hover{
border-bottom: 2px solid #000000;
-webkit-animation: fadein .5s; /* Safari and Chrome */
-moz-animation: fadein .5s; /* Firefox */
-ms-animation: fadein .5s; /* Internet Explorer */
-o-animation: fadein .5s; /* Opera */
animation: fadein .5s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

HTML

<ul class="nav navbar-nav">
  <li> <a href="#" role="button" aria-expanded="false">About</a></li>
  <li> <a href="#" role="button" aria-expanded="false">Services</a></li>
  <li> <a href="#" role="button" aria-expanded="false">Portfolio</a></li>
  <li> <a href="#" role="button" aria-expanded="false">Contact</a></li>
 </ul>

Answer 1

您可以删除第border-bottom: 2px solid #000000;行，而是添加：

.nav li a {
  border-bottom: 2px solid rgba(0,0,0,0);
}

并且还改变了所有这些：

from { opacity: 0; }
to   { opacity: 1; }

到

from { border-bottom-color: rgba(0,0,0,0); }
to   { border-bottom-color: rgba(0,0,0,1); }

请参阅此Fiddle以供参考。

或者，正如@Paulie_D的评论中所建议的，您也可以这样做：

.nav li a {
  border-bottom: 2px solid rgba(0,0,0,0);
}

.nav li a:hover{
  border-bottom: 2px solid rgba(0,0,0,1);
  -webkit-transition: border-bottom .4s ease;
  -moz-transition: border-bottom .4s ease;
  -ms-transition: border-bottom .4s ease;
  -o-transition: border-bottom .4s ease;
  transition: border-bottom .4s ease;
}

这显然使一切变得更容易。

Fiddle第二个版本

淡化fondin文本悬停

1 个答案: