使用 JavaScript 淡化文本颜色

Posted 2023-03-06

【中文标题】使用 JavaScript 淡化文本颜色

【英文标题】：Fading text color using JavaScript

【发布时间】：2015-06-05 02:03:59

【问题描述】：

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

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


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

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

【参考方案1】：

你应该只用 CSS 来做。

.fade-effect
  transition: color 0.5s;
  color:#000000;

.fade-effect:hover
  color:#990099;

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

---

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

【讨论】：

谢谢，我不知道用 JavaScript 做起来这么难！这既简单又干净，我在这个主题上找不到任何直接的答案。我会把你的标记为答案。

【参考方案2】：

这应该回答它： Fade Effect on Link Hover? 展示了几种方法，最常用和最现代的方法是使用第一个答案中发布的 CSS3-transitions：

 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;