Question

我想在指针接触时将盒子颜色从黑色更改为蓝色，然后当它离开时它必须再次返回黑色..这是我的代码

<html>
<script>
function myFunction() {
document.getElementById("box").style.background = "blue";
    
}
</script>

<body>
<div id="box" style="width:300px;height:300px;border:1px solid;background-color:black" onblur="myFunction()"></div>
<label id="lab">arrow</label>
</body>

</html>

Answer 1

使用CSS，而不是JS：

＆＃13;

#box:hover {
  background-color: blue;
}
#box {
  width: 300px;
  height: 300px;
  border: 1px solid;
  background-color: black;
}

＆＃13;

<div id="box"></div>
<label id="lab">arrow</label>

＆＃13;

Answer 2

您可以在CSS中执行此操作而无需使用JavaScript：

#box {background: black;}
#box:hover {background: blue;}

Answer 3

如果您使用的是JavaScript，那么您需要的是onMouseOver和onMouseOut：

<script>
function myFunction() {
document.getElementById("box").style.background = "blue";

}
function changeBack(){
document.getElementById("box").style.background = "black";
}
</script>

<body>
<div id="box" style="width:300px;height:300px;border:1px solid;background-color:black" onMouseOver="myFunction()"
  onMouseOut="changeBack()"


></div>
<label id="lab">arrow</label>
</body>

https://jsfiddle.net/ho2rwxLo/

试图在javascript中改变触摸框的颜色

3 个答案: