Question

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

为什么这不起作用：

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

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

firebug返回：

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

Answer 1

你的语法错了，你可能会想'jQuery'，试试这个：

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

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

Answer 2

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伪类。

Answer 3

尝试：

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

More Info.

Answer 4

试试此代码

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

Answer 5

您可以使用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

使用javascript更改元素onMouseOver的颜色

5 个答案: