鼠标移上去变大、改变背景颜色等

最新推荐文章于 2023-03-26 19:49:27 发布

weixin_30767921

最新推荐文章于 2023-03-26 19:49:27 发布

阅读量266

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhengleilei/p/9062268.html

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        *{
            margin: 0px auto;
            padding: 0px;
        }
        
        #anniu{
            width:100px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            background-color: blue;
        }
        #anniu2{
            width:100px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            background-color: blue;
        }
        #anniu3{
            width:100px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            background-color: blue;
            
        }
        #anniu4{
            width:100px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            background-color: blue;
            display: none;
        }
        #continer{
            width:100%;
            height: 200px;        
            background-color: red;
            
            }
        #anniu5{
            width:100px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            background-color: blue;
            }
        #anniu6{
            width:100px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            background-color: blue;
            display: none;
            float:left;
     }
        
        
    </style>
    <body>
        <div id="anniu" οnclick="tanChuang()">按钮</div>
        <input type="button" name="" id="anniu2" value="按钮" οnclick="tanChuang()"/>
        <button id=anniu3 οnclick="tanChuang()">按钮</button>
            <br />    <br />
        <label οnmοuseοver="xianshi()" οnmοuseοut="yincang()"><input type="checkbox" />鼠标经过出现按钮</label>
        <button id="anniu4">按钮</button>
        <br />    <br />
        <div id="continer" οnmοuseοver="yiRu()" οnmοuseοut="yichu()">鼠标经过这个div变高变色，移出再恢复</div>
        <div id="anniu3" οnclick="change1()">颜色1 </div>
        <br />    <br />
        <div id="anniu3" οnclick="change2()">颜色2 </div>    
        <br />    <br />
        <br />    <br />
        <button id="anniu5" οnclick="showhide()">按钮1</button>
        <button id="anniu6" οnclick="showhide()">按钮2</button>
    </body>
</html>
<script type="text/javascript">
    function tanChuang() {
        alert("弹出窗口");
    }    
    function xianshi(){
        var div1 =document.getElementById("anniu4");
        div1.style.display="block";
    }
    function yincang(){
        var div1 =document.getElementById("anniu4");
        div1.style.display="none";
    }
    function yiRu(){
        var div2=document.getElementById("continer");
        div2.style.width = "80%";
        div2.style.height = "400px";
        div2.style.backgroundColor ="green"
    }
    function yichu(){
        var div2=document.getElementById("continer");
        div2.style.width = "100%";
        div2.style.height = "200px";
        div2.style.backgroundColor ="red "
    }
    function change1(){
        var bodycolor=document.body;
        bodycolor.style.backgroundColor="red";
    }
    function change2(){
        var bodycolor=document.body;
        bodycolor.style.backgroundColor="green";
    }
    function showhide(){
        var showhide = document .getElementById("anniu6").style.display;
        if(showhide=='none'){
            document .getElementById("anniu6").style.display="block";
        }else{
            document .getElementById("anniu6").style.display="none";
        }
    }

    </script>