代码之家 › 专栏 › 技术社区 › jjnguy Julien Chastang

实现HTML元素鼠标覆盖背景颜色更改的最简单方法是什么?

html javascript

jjnguy Julien Chastang · 技术社区 · 16 年前

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;
}

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>

(对所有代码感到抱歉)

4 回复 | 直到 16 年前

sblundy 16 年前

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

philnash 16 年前

sblundy基本上是对的。此外,所有现代浏览器都允许您在<a>然而,IE6不会在任何其他元素上认识到这一点。

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

这将为类为“hoverable”的所有元素在悬停时提供一个悬停类。

Sören Kuklau Keith Boynton 16 年前

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;
}

以及: