更改标签的文本

change the text of the label

本文关键字：文本 标签      更新时间：2023-09-26

当指针变为手并将鼠标悬停在框上时，将标签的文本更改为"手"，然后将文本更改回"箭头"...这是我的代码 

<html>
<style>
  #box:hover {
    background-color: red;
  }
  #box {
    width: 300px;
    height: 300px;
    border: 1px solid;
    background-color: black;
  }
</style>
<body>
  <div id="box" onmouseover="myFunction()"></div>
  <label id="lab">arrow</label>
</body>
<script>
  function myFunction() {
    document.getElementById("lab").innerHTML = "hand";
    document.getElementById("box").style.cursor = "pointer"
  }
</script>
</html>

您可以添加onmouseout触发鼠标功能。

#box:hover {
  background-color: red;
}
#box {
  width: 300px;
  height: 300px;
  border: 1px solid;
  background-color: black;
}
<div id="box" onmouseover="myFunction(true)" onmouseout="myFunction(false)"></div>
<label id="lab">arrow</label>
<script>
  function myFunction(over) {
    if (over) {
      document.getElementById("lab").innerHTML = "hand";
      document.getElementById("box").style.cursor = "pointer"
    } else {
      document.getElementById("lab").innerHTML = "arrow";
    }
  }
</script>

相关文章：