JS：鼠标移入移出事件监听

最新推荐文章于 2024-07-16 20:08:38 发布

燕双嘤

最新推荐文章于 2024-07-16 20:08:38 发布

阅读量1.8w

点赞数 1

分类专栏： HTML/CSS/JS/jQuery

本文链接：https://blog.csdn.net/qq_42192693/article/details/82426617

版权

HTML/CSS/JS/jQuery 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>鼠标移入移出显示效果</title>
    <style>
    #div1 {
      width: 150px;
      height:50px;
      background: #fffccc;
      border:1px solid #999;
      display: none;
    }
    #div2{
      width: 200px;
      height:200px;
      background: red;
    }
    </style>
  </head>
  <body>
    <input type="checkbox" onmouseover="document.getElementById('div1').style.display='block';"
     onmouseout="document.getElementById('div1').style.display='none';">
    <div id="div2" onmousemove="over()" onmouseout="out()"></div>
  </body>
   <script type="text/javascript">
   function over(){
     var obj=document.getElementById("div2");
     obj.style.width="400px";
     obj.style.height="400px";
     obj.style.background="green";
   }
   function out(){
     var obj=document.getElementById("div2");
     obj.style.width="200px";
     obj.style.height="200px";
     obj.style.background="red";
   }
   </script>
</html>