使用JavaScript更改按钮的背景色

Question

我正在编写一个HTML网页，我使用了一个按钮，并且需要在鼠标悬停时使用javascript函数更改他的背景颜色。 这是代码。

<button onmouseover="funzione(this)">BTN</button>
<script>
    funzione(x){
        x.style.background-color=#ffffff;
    }
</script>

Answer 1

在JavaScript中，您需要获取元素x处理程序，例如：

var x = document.getElementById("x");

但是您应该使用CCS进行此操作：

button{
    background-color: yellow;
}

button:hover{
    background-color: lime;
}

https://developer.mozilla.org/zh-CN/docs/Web/CSS/:hover

Answer 2

这是非常基本的。 您缺少关键字function ，并且具有访问属性的样式，因此需要使用驼峰式大小写。 最后，将颜色十六进制用引号引起来。

 function funzione(x){ x.style.backgroundColor= '#ffffff'; } 

 <button onmouseover="funzione(this)">BTN</button> 

推荐的方法是在生产环境中使用CSS，但是如果您只喜欢JavaScript并且想要探索，那就很好了。

Answer 3

如果要使用js：

 <button onmouseover="set_color(this)">BTN</button> <script> function set_color(x){ x.style.backgroundColor='red'; } </script> 

Answer 4

 function funzione(x){ x.style.backgroundColor = "#ffffff"; } 

 <button onmouseover = "funzione(this)">BTN</button> 

Answer 5

您可以在CSS中轻松，高效且更少的代码来完成此操作。

<style type="text/css">
.myHoverButton:hover { background-color: #ffffff; }
</style>

<button id="button1" class="myHoverButton">