通过js鼠标移出变绿移入变红和鼠标移入出现提示移出提示消失

最新推荐文章于 2024-04-07 13:01:24 发布

山高路长啊

最新推荐文章于 2024-04-07 13:01:24 发布

阅读量2.1k

点赞数

本文链接：https://blog.csdn.net/liuzong_dage/article/details/83628658

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>

// 样式编写；
<style type="text/css">

//id使用#号，class使用点；
           #div1{width:200px;
           height:200px;
           background: grey;

//border加入边框；
border: 1px solid black;

display设置显示或不显示（none）为不显示；
           display:none;}
           #div2{
               width:200px;
           height:200px;
           background: green;
           border: 1px solid black;

           }
       </style>
       <script type="text/javascript">

//创建函数鼠标移入变绿；
function togreen(){

//设置变量并通过id获取元素div2；
               var odiv=document.getElementById("div2");
               odiv.style.width="300px";
               odiv.style.height="300px";
               odiv.style.background="red";
           }

//鼠标移出变红
               function tored(){
               var odiv=document.getElementById("div2");
               odiv.style.width="200px";
               odiv.style.height="200px";
               odiv.style.background="green";
           }
       </script>
   </head>
   <body>

//鼠标移入出现提示，移出提示消失
       <input type="checkbox" οnmοuseοver="div1.style.display='block';" οnmοuseοut="div1.style.display='none';"/>
       <div id="div1">为了你的信息安全。。。。。。</div>
       <div id="div2" οnmοuseοver="togreen()" οnmοuseοut=" tored()">变</div>
   </body>
</html>

山高路长啊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
通过js鼠标移出变绿移入变红和鼠标移入出现提示移出提示消失

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt;// 样式编写； &lt;style type="text/css"&gt;//id使用
复制链接

扫一扫