使用javascript更改元素onMouseOver的颜色

时间:2014-01-17 11:33:16

标签: javascript prototypejs

我正在编写javascript,它会在鼠标悬停在元素上时改变元素的颜色。我完全知道如何使用jQuery来做这件事,但这一次我使用纯JS或Prototype来做到这一点。

为什么这不起作用:

<div id="boundary1"></div>

document.getElementById("boundary1").onmouseover(function() {
    alert("test");
})

firebug返回:

TypeError: document.getElementById(...).onmouseover is not a function

5 个答案:

答案 0 :(得分:3)

你的语法错了,你可能会想'jQuery',试试这个:

var boundary = document.getElementById('boundary');
var mouseOverFunction = function () {
    // this.style.color = '#000'; // your colour change
};
boundary.onmouseover = mouseOverFunction;

我已将逻辑分开,使开发和逻辑更清晰,它也使您的函数可重用。

答案 1 :(得分:1)

Prototype的方法是:

$('elementId').observe('mouseenter', function(evt){
    this.setStyle('background-color: yellow');
}).observe('mouseleave', function(evt){
    this.setStyle('background-color: inherit');
});

但正如其他人已经指出的那样,实现这一目标的真正方法是使用CSS。我可以想象在JS中需要做的唯一原因是你必须支持IE&lt; = 8,它不喜欢在除A标签之外的任何地方执行:hover伪类。

答案 2 :(得分:0)

尝试:

document.getElementById("boundary1").onmouseover = function() { 
  alert("test");
}

More Info.

答案 3 :(得分:0)

试试此代码

<td onMouseOver="this.bgColor='#00CC00'" onMouseOut="this.bgColor='#009900'" bgColor=#009900>
<A HREF="#">Click Here</A></TD>

答案 4 :(得分:0)

您可以使用CSS

来完成
<style>
.changecolour:hover
{
background-color:yellow;
}
</style>

现在您要更改颜色的文字

<span class ="changecolour">Color changes when mouse comes here.</span>

参考:http://www.w3schools.com/cssref/sel_hover.asp