使用 javascript 悬停时编辑 link 的颜色

Question

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

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: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>

Answer 3

问题在于，当您的代码执行时，它会查找所有当前处于悬停状态的 a 元素，即 none他们，所以什么也没有发生。一旦您实际将鼠标悬停在 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>

使用 javascript 悬停时编辑 link 的颜色

Edit the colour of a link on hover with javascript

html

javascript

css

jquery

hyperlink