使用javascript更改元素onMouseOver的颜色

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

为什么不这项工作：

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

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

萤火虫返回：

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

来源

2014-01-17 Ortix92

你的语法是错误的，你可能会想有点太“jQuery的”，试试这个：

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

我分开，以使开发和逻辑清晰的逻辑，它使你的功能可重复使用。

来源

2014-01-17 11:37:28

尝试：

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

More Info.

来源

2014-01-17 11:35:45

有没有诀窍，你是一个bauss – Ortix92

@ Ortix92：请标记为接受的答案，如果它为你工作。 :) –

我还得等上几分钟。有没有办法将选定的元素传递给该函数？ – Ortix92

使用CSS

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

现在你要改变颜色的文字试试这个代码

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

来源

2014-01-17 11:37:36

你可以做到这一点

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

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

来源

2014-01-17 11:41:19

在我的问题中，我提到过CSS吗？我特别询问了JS和Prototype – Ortix92

Prot这种方式可以做到这一点：

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

但正如其他人已经指出的，真正的方法是用CSS。我可以想象在JS中需要这样做的唯一原因是，如果您必须支持IE < = 8，它不喜欢对除A标记之外的其他任何内容执行：hover伪类。

来源

2014-01-17 14:45:18 Walter

使用javascript更改元素onMouseOver的颜色

回答

相关问题