爲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

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 3

您可以使用庫像jQuery使事情變得更簡單。

Answer 4

sblundy擁有基本的權利。另外，所有現代瀏覽器都允許使用<a>上的hover僞元素，但是IE6不會在任何其他元素上識別此元素。

在IE6中，當您懸停時，您需要某種JavaScript來添加類名。我喜歡使用jQuery，我會那樣做的方法如下：

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

這將使與類「hoverable」一類懸停時，他們上空盤旋的所有元素。