• 关于上一篇鼠标移到按钮时的“按下”效果的三种方法


    上一篇博文中,关于按钮按下的效果回过头研究了下,总结了如下三种方法,只写出关键样式:

    1、相对定位

    1 input.button{  
    2   
    3       position:relative; //用相对定位  
    4 }  
    5   
    6 input.button:hover{  
    7         top:2px;//鼠标移动到此top增加2px  
    8 } 

    2、主要利用外边距这个属性,鼠标移动到按钮位置时,按钮上外边距增加2px,下外边距减少2px(相当于走出去2px又退回来2px),就可以达到按下效果,如果只是单独写margin-top:2px;鼠标移动到按钮时,后面的按钮也会跟着一起向下移动。

     1 input.button{  
     2   
     3  margin:2px; //先设置外边距为2px  
     4   
     5 }  
     6 input.button:hover{  
     7   
     8      margin-top:4px;  
     9      margin-bottom:0px;  
    10   }  

    3、利用内边距,设置按钮的容器(btns)的内边距,跟上一种相对,上一个是从按钮本身出发,现在是从它的容器开始,相当于把按钮推下去0.2cm又拉回来0.2cm。

     1 #btns
     2 {
     3       padding: 0.3cm 0.5cm;
     4                //上下内边距都是0.3cm,左右内边距都是0.5cm
     5 } 
     6 
     7 
     8 #btns:hover
     9 {  
    10     padding-top: 0.4cm;  
    11      padding-bottom:0.2cm;  
    12 } 

       

    哪里没讲清楚的请联系博主,一起探讨!

  • 相关阅读:
    Python
    版本控制
    后台
    前端
    提升权限 关闭系统
    SC命令(windows服务开启/禁用)
    获取当前电脑全部网络连接名字
    x64 win64编译环境下ADO链接Access数据库的问题解决
    Netsh命令-网络禁用开启
    windows主机防护
  • 原文地址:https://www.cnblogs.com/Lynn0814/p/5686991.html
Copyright © 2020-2023  润新知