繁体   English   中英

使用JavaScript更改元素onMouseOver的颜色

[英]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伪类。

尝试:

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

更多信息。

试试这个代码

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM