zoukankan      html  css  js  c++  java
  • 按钮一色三变化

    给按钮一个颜色,实现hover,点击变色效果。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            #main{
                position:relative;
                display:inline-block;
            }
            button{
                height:30px;
                line-height: 30px;
                background:rgba(0,0,0,0);
                font-size: 14px;
                padding:0px 15px;
                outline:none;
                border:none;s
            }
            .divCan{
                position: absolute;
                top:0;
                left:0;
                100%;
                height:100%;
                z-index: -10001;
                background: green;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <button>按扭</button>
            <div class="divCan"></div>
        </div>
        <script type="text/javascript">
            var btn=document.getElementsByTagName('button')[0];
            console.log(btn)
            btn.onclick=function(e){
                console.log(1)
                this.style.backgroundColor="rgba(0,0,0,0.20)"
            }
            btn.onmouseover=function(e){
                this.style.backgroundColor="rgba(0,0,0,0.09)"
            }
            btn.onmouseout=function(e){
                this.style.backgroundColor="rgba(0,0,0,0)"
            }
    
        </script>
    </body>
    </html>

    这个其实还有点不正常;颜色出现覆盖了,且没有顺序可以言,想更好的控件按钮的颜色 可以通过添加,删除class来实现,可以出现多个class能过他们的放的位置从面能有不同的效果;有兴趣的可以试下。

    “我相当乐意花一天的时间通过编程把一个任务实现自动化,除非这个任务手动只需要10秒钟就能完成”
  • 相关阅读:
    c博客作业05--指针
    C博客作业04--数组
    C博客作业03--函数
    C博客作业02--循环结构
    C博客作业01--分支、顺序结构
    我的第一篇博客
    DS博客作业05--查找
    DS博客作业04--图
    DS博客作业03--树
    DS博客作业02--栈和队列
  • 原文地址:https://www.cnblogs.com/flxy-1028/p/6017124.html
Copyright © 2011-2022 走看看