gpt4 book ai didi

javascript - CSS 样式操作 : Javascript not Working

转载 作者:太空宇宙 更新时间:2023-11-04 03:24:42 24 4
gpt4 key购买 nike

我试图制作一个简单的按钮,它可以在鼠标悬停时使用 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com