使用javascript编辑悬停时链接的颜色[重复]

Question

这不是我在做的，只是发布代码的一种简单方法，但为什么这不起作用？

var links = 'hsla(40, 50%, 50%, 1)';

$('a:hover').css({'color' : links });

我应该如何编写 javascript 代码来完成这项工作？

Answer 1

去掉大括号，用逗号代替冒号：

var links = 'hsla(40, 50%, 50%, 1)';

$('a:hover').css('color', links);

Answer 2

问题在于，当您的代码执行时，它会查找所有 当前 处于悬停状态的 a 元素，但它们都不是，所以什么也没有发生。一旦你真正将鼠标悬停在a 上，你需要运行的代码就已经完成了。

相反，只需在 CSS 中执行此操作：

a:hover { color: hsla(40, 50%, 50%, 1); }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#test">test</a>

Answer 3

$('a:hover') 在执行时选择所有悬停的锚元素。而且它不一定会选择未来所有悬停的元素。

使用mouseenter 和mouseleave 事件

var links = 'hsla(40, 50%, 50%, 1)';

$('a').on({
  mouseenter: function() {
    $(this).css({ 'color': links })
  },
  mouseleave: function() {
    $(this).css({ 'color': 'rgb(85, 26, 139)' })
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href>Link 1</a>
<a href>Link 2</a>
<a href>Link 3</a>

使用 CSS 自定义属性（变量）

var links = 'hsla(40, 50%, 50%, 1)';

document.documentElement.style.setProperty('--hover-color', links);

a {
  color: rgb(85, 26, 139);
}

a:hover {
  color: var(--hover-color, rgb(85, 26, 139));
}

<a href>Link 1</a>
<a href>Link 2</a>
<a href>Link 3</a>