码迷,mamicode.com
首页 > 其他好文 > 详细

鼠标悬停和移除的变化(红变绿)

时间:2020-07-05 15:31:46      阅读:68      评论:0      收藏:0      [点我收藏+]

标签:效果图   class   var   utf-8   mouse   效果   mic   script   mamicode   

鼠标悬停和移除

效果图

 

技术图片

 

 

技术图片

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width:100px;
                height:100px;
                background-color:red;
                border-radius:20px;
                margin:0 auto;
            }
                
            
            
            
        </style>
    </head>
    <body>
        <div id="div1" onmouseover="toGreen()" onmouseout="toRed()"></div>
        <script>
            function toRed()
            {var x=document.getElementById("div1");
                x.style.width="100px";
                x.style.height="100px";
                x.style.backgroundColor="red";
                x.style.borderRadius="20px";
                
                
            }
            
            function toGreen()
            {var v=document.getElementById("div1");
             v.style.width="300px";
             v.style.height="300px";
             v.style.backgroundColor="green";
             v.style.borderRadius="30px";
                
                
                
            }
            
            
            
        </script>
        
    </body>
</html>

鼠标悬停onmouseover在红色上面,变成绿色,鼠标移开onmouseout变红色

 

鼠标悬停和移除的变化(红变绿)

标签:效果图   class   var   utf-8   mouse   效果   mic   script   mamicode   

原文地址:https://www.cnblogs.com/hsl541/p/13245943.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!