[英]Change color of element onMouseOver using javascript
我正在编写javascript,当鼠标悬停在元素上时,它将更改元素的颜色。 我完全知道如何使用jQuery做到这一点,但是这次我必须使用纯JS或Prototype做到这一点。
为什么这样不起作用:
<div id="boundary1"></div>
document.getElementById("boundary1").onmouseover(function() {
alert("test");
})
萤火虫返回:
TypeError: document.getElementById(...).onmouseover is not a function
您的语法有误,您可能也想过'jQuery',请尝试以下操作:
var boundary = document.getElementById('boundary');
var mouseOverFunction = function () {
// this.style.color = '#000'; // your colour change
};
boundary.onmouseover = mouseOverFunction;
我分离了逻辑以使开发和逻辑更加清晰,这也使您的功能可重复使用。
原型的方法是这样的:
$('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伪类。
试试这个代码
<td onMouseOver="this.bgColor='#00CC00'" onMouseOut="this.bgColor='#009900'" bgColor=#009900>
<A HREF="#">Click Here</A></TD>
您可以使用CSS来完成
<style>
.changecolour:hover
{
background-color:yellow;
}
</style>
现在为您要更改颜色的文本
<span class ="changecolour">Color changes when mouse comes here.</span>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.