javascript - 为 HTML 元素实现鼠标悬停背景颜色更改的最简单方法是什么？

Question

我有以下样式:

a.button {
    background-color: orange;
    margin: .2cm;
    padding: .2cm;
    color: black;
    font-family: sans-serif;
    text-decoration: none;
    font-weight: bold;
    border: solid #000000;
}

a.buttonMouseover {
    background-color: darkGoldenRod;
    margin: .2cm;
    padding: .2cm;
    color: black;
    font-family: sans-serif;
    text-decoration: none;
    font-weight: bold;
    border: solid #000000;
}

以及以下 javascript 代码(顺便说一句，这是我的第一个代码):

function backgroundChangeIn(element){
    if (element.className = "a.button"){element.className = "buttonMouseover";}
}
function backgroundChangeOut(element){
    if (element.className = "a.buttonMouseover"){element.className = "button";}
}

并且，以下元素应该在鼠标悬停时更改背景:

<a class="button" href="" onmouseover="backgroundChangeIn(this)" onmouseout="backgroundChangeOut(this)">A Button</a>

到目前为止它对我有用。但我想知道是否有更好的方法。

(抱歉所有代码)

Answer 1

根据您的目标浏览器，您可以使用 hover 伪标签。

a.button {
    background-color: orange;
    margin: .2cm;
    padding: .2cm;
    color: black;
    font-family: sans-serif;
    text-decoration: none;
    font-weight: bold;
    border: solid #000000;
}

a.button:hover {
    background-color: darkGoldenRod;
}

这里有一些关于它的文档，位于 w3schools .看起来它在所有远程现代浏览器上都得到了很好的支持。

请注意，正常和悬停样式规则都适用，悬停优先。所以你只需要把什么变化放在悬停规则中。