javascript - CSS 样式操作 : Javascript not Working

标签 javascript html css mouseevent onmouseover

我试图制作一个简单的按钮,它可以在鼠标悬停时使用 JavaScript 改变颜色,但它不起作用,请帮忙.... HTML:

<head lang="en">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="Button.css" />
<script type="text/javascript" src="Button.js"></script>
<title>BUTTON</title>
</head>
<body>
<div id="Button">PRESS ME</div>
</body>

JavaScript:

var Button = document.getElementById('Button');
Button.onmouseover(function(){
this.style.backgroundColor  = 'rgba(0,255,0,0.3)';
});

CSS:

#Button{
width: 120px;
height : 30px;
position: fixed;
top: 100px;
left:300px;
border: 1px solid black;
background-color : rgba(0,0,255,0.3);
font-size : 25px;
}

最佳答案

改变

 Button.onmouseover(function(){
   this.style.backgroundColor  = 'rgba(0,255,0,0.3)';
 });

   Button.onmouseover = function(){
       this.style.backgroundColor  = 'rgba(0,255,0,0.3)';
    };

完整示例:

var Button = document.getElementById('Button');
Button.onmouseover = function () {
    this.style.backgroundColor = 'rgba(0,255,0,0.3)';
};
#Button {
    width: 120px;
    height : 30px;
    position: fixed;
    top: 100px;
    left:300px;
    border: 1px solid black;
    background-color : rgba(0, 0, 255, 0.3);
    font-size : 25px;
}
<div id="Button">PRESS ME</div>

JSFiddle 演示:http://jsfiddle.net/n4j53jcu/

关于javascript - CSS 样式操作 : Javascript not Working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27278649/

相关文章:

javascript - 如何使用 html 输入标签设置文本区域中文本的颜色

javascript - 跨浏览器兼容性问题 (firefox)

javascript - 在没有链接的情况下将 css 按钮更改为 css active

html - 表格列的宽度不会设置

css - 溢出 : scroll is not working in my electron app

javascript - 在 Firebase 中写入数据后读取数据

javascript - 如何在不使用 sails.io 客户端帮助程序方法的情况下向 sails.js Controller 发出请求

javascript - 如何在html选项中添加onClick?

html - 溢出时 firefox 中没有滚动条 :auto set to body

javascript - 将顶部对齐的文本附加到一行底部对齐的图像的底部