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

我有以下几种风格:

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 Button

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

(对不起所有代码)

根据您的目标浏览器,您可以使用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的文档.看起来它在所有远程现代浏览器上都得到了很好的支持.

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

sblundy有正确的基础知识.除此之外,所有现代浏览器都允许您在上使用hover伪元素,但是IE6不会在任何其他元素上识别它.

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