Java script 实现 鼠标移上内容发生变化

<style type="text/css">
  #kuang{
  width: 300px;
  height: 400px;
  border: 1px solid red;
  border-radius: 5px;
  margin: 0 auto;
  overflow: hidden;
  }
  #shang{
  width: 300px;
  height: 200px;
  border: 1px solid blue;
   
  text-align: center;
  line-height: 200px;
  color: white;
  border-radius: 150px;
  transition: 1s; /* 过渡 */
   
  }
  #xia{
  width: 300px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  border-radius: 50%;
  }
  </style>
  </head>
  <body>
  <div id="kuang">
  <div id="shang">
  上
  </div>
  <div id="xia">
  下
  </div>
  </div>
  </body>
  </html>
  <script type="text/javascript">
   
  //首先找到元素
  //鼠标移入移出之后 1、边框改变 2、内容的改变
  var kuang = document.getElementById("kuang")
  var shang = document.querySelector("#shang")
  var xia = document.querySelector("#xia")
  kuang.onmouseover = function(){
  shang.style.borderRadius = "5px"
  xia.style.borderRadius = "5px"
  shang.innerHTML = "新上内容"
  xia.innerHTML = "新下内容"
  }
  kuang.onmouseout = function(){
  shang.style.borderRadius = "150px"
  xia.style.borderRadius = "150px"
  shang.innerHTML = "上"
  xia.innerHTML = "下"
  }
  </script>
posted @ 2022-03-18 23:57  猫java猫  阅读(119)  评论(0)    收藏  举报