Question

我有一个简单的脚本，可以在鼠标悬停在导航链接上时更改导航链接的颜色：

function fadeToNormal(element) {
    element.style.color = "#000000";
}

function fadeToSelected(element) {
    element.style.color = "#990099";
}

现在我想尝试“淡化”链接的颜色，以获得更好看的过渡效果。有没有办法用纯JavaScript做到这一点？

Answer 1

你应该单独使用CSS。

＆＃13;

.fade-effect{
  transition: color 0.5s;
  color:#000000;
}
.fade-effect:hover{
  color:#990099;
}

＆＃13;

<a href="#" class="fade-effect">link #1</a>
<a href="#" class="fade-effect">link #2</a>

＆＃13;

如果您使用javascript执行此操作，则必须将颜色分解为RGB值，手动/以编程方式为其设置动画，同时将其应用于相关元素。

Answer 2

这应该回答： Fade Effect on Link Hover? 显示了几种方法，最常用和现代的方法是使用CSS3过渡，如第一个答案中所述：

 a {
   color:blue;
   /* First we need to help some browsers along for this to work.
      Just because a vendor prefix is there, doesn't mean it will
      work in a browser made by that vendor either, it's just for
      future-proofing purposes I guess. */
   -o-transition:.5s;
   -ms-transition:.5s;
   -moz-transition:.5s;
   -webkit-transition:.5s;
   /* ...and now for the proper property */
   transition:.5s;
 }
 a:hover { color:red; }

使用JavaScript淡化文本颜色

2 个答案: