如何在使用 javascript 访问、未访问或悬停时更改 link 的 css？

Question

所以在我的 html 代码中有一行代码看起来像底部所示：

    <a href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ">Find out more</a>

并且我想使用 java 脚本在访问、未访问或悬停时更改此 link 的颜色。换句话说，我正在寻找的是一种使用 java 脚本执行如下所示操作的方法。

    a.visited {css property}; a.link {css property}; a.hover {css property}

有人知道怎么做吗？任何帮助将不胜感激。

Answer 1

从您的 CSS，您可以使用 link 的默认样式，如下所示，并使用 CSS 变量

a{
    --color:lightblue;
    --hoverColor: red;
    --visitedColor: blue; 
    color: var(--color);
}

a:hover {color:var(--hoverColor);}
a:visited:hover {color:var(--hoverColor);}
a:visited {color:var(--visitedColor);}

从您的 JavaScript，您可以覆盖 hoverColor 和 visitedColor css 变量，如下所示

document.querySelectorAll("a").forEach(function(link){
    link.style.setProperty('--hoverColor','orange');
});

document.querySelectorAll("a").forEach(function(link){
    link.style.setProperty('--visitedColor','blue');
});

如何在使用 javascript 访问、未访问或悬停时更改 link 的 css？

How do I change the css of a link when visited, unvisited or hovered using javascript?

javascript

css

hyperlink