为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代码(我的第一个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有正确的基础知识.除此之外,所有现代浏览器都允许您在<a>上使用hover伪元素,但是IE6不会在任何其他元素上识别它.

在IE6中,您需要某种JavaScript来在悬停时添加类名.我喜欢使用jQuery,我这样做的方式如下:

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

当它们被盘旋时,它会给所有具有"可悬空"类的元素一种悬停.