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代码（我的第一个btw）：

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的一些文档。看起来它在所有远程现代浏览器上得到了很好的支持。

请注意，应用了普通样式和悬停样式规则，悬停优先。所以你只需要在悬停规则中进行哪些更改。

Answer 2

sblundy有正确的基础知识。除此之外，所有现代浏览器都允许您在＆lt; a＆gt;上使用hover伪元素。但IE6不会识别任何其他元素。

在IE6中，你需要某种JavaScript来悬停时添加一个类名。我喜欢使用jQuery，我这样做的方式如下：

$(function(){
  $('.hoverable').hover(function(){
    $(this).addClass('hover');
  },
  function(){
    $(this).removeClass('hover');
  })
})

当它们悬停在上面时，它会为所有带有'hoverable'类的元素提供一个悬停类。

Answer 3

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

a.button {
    background-color: orange;
}

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

和

<a class="button" href="">A Button</a>

Answer 4

您可以使用像jQuery这样的库来简化操作。

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

4 个答案: