导航文本使用css淡入淡出

Question

我正在尝试为我制作一个投资组合。当我滚动导航链接（纯文本）时，我希望有一个渐弱的输入效果。有没有办法使用CSS获得褪色效果？或者我应该为此做些什么？请帮帮我:)。

Answer 1

有很多方法可以做到这一点。

<强> CSS3：

使用-webkit-transition。

#fademe {
   opacity: 0.5;
   -webkit-transition: opacity 1s;
}

#fademe:hover {
   opacity: 1;
   -webkit-transition: opacity 1s;
}

jQuery（Javascript）：

jQuery的hover和fadeTo方法。

$("#fademe").hover(function(){
    $(this).fadeTo(1);
}, function(){
   $(this).fadeTo(0.5);
});

Answer 2

结帐CSS transitions - MDC Doc Center

或Different Transitions for Hover On / Hover Off | CSS-Tricks

来自css-tricks：

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}

Answer 3

您可以使用jquery fadein和fadeout来执行此操作。