JS小练习之鼠标移入移出实现的一些效果

本文链接：https://blog.csdn.net/weixin_41586886/article/details/80538435

<!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" οnmοuseοver="document.getElementById('div1').style.display='block';"
     οnmοuseοut="document.getElementById('div1').style.display='none';">
    <div id="div1">哈哈哈哈哈哈，现在你能看见我啦！</div>
    <div id="div2" οnmοusemοve="over()" οnmοuseοut="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>

在这里主要用到的知识点：JS事件：鼠标移入 onmouseover 鼠标移出 onmouseout ;绑定事件之后可以实现的一些效果

感觉可以根据这个事件实现很多常见网页上的一些特效，还是蛮好的