1. 程式人生 > >關於上一篇滑鼠移到按鈕時的“按下”效果的三種方法

關於上一篇滑鼠移到按鈕時的“按下”效果的三種方法

上一篇博文中,關於按鈕按下的效果回過頭研究了下,總結了如下三種方法,只寫出關鍵樣式:


1、相對定位

input.button{

      position:relative; //用相對定位
}

input.button:hover{
        top:2px;//滑鼠移動到此top增加2px
}




2、主要利用外邊距這個屬性,滑鼠移動到按鈕位置時,按鈕上外邊距增加2px,下外邊距減少2px(相當於走出去2px又退回來2px),就可以達到按下效果,如果只是單獨寫margin-top:2px;滑鼠移動到按鈕時,後面的按鈕也會跟著一起向下移動。
input.button{

 margin:2px; //先設定外邊距為2px

}
input.button:hover{

     margin-top:4px;
     margin-bottom:0px;
  }


 
3、利用內邊距,設定按鈕的容器(btns)的內邊距,跟上一種相對,上一個是從按鈕本身出發,現在是從它的容器開始,相當於把按鈕推下去0.2cm又拉回來0.2cm。
<span style="font-family:monospace;color:#000000;font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none;">#btns{padding: 0.3cm 0.5cm;} //上下內邊距都是0.3cm,左右內邊距都是0.5cm</span>
#btns:hover{
padding-top: 0.4cm;
padding-bottom:0.2cm;
}

哪裡沒講清楚的請聯絡博主,一起探討!

相關推薦

關於滑鼠按鈕的“效果方法

上一篇博文中,關於按鈕按下的效果回過頭研究了下,總結了如下三種方法,只寫出關鍵樣式: 1、相對定位input.button{ position:relative; //用相對定位 }

安卓按鈕新增監聽的方法

第一種,匿名內部類 匿名內部類一般通過以下程式碼完成,顧名思義,通過傳入匿名內部類來實現監聽並寫出對應的事件處理 btButton.setOnClickListener(new OnClickListener() { @SuppressLint("ShowToast") @

JS判斷個數組中是否有重複值的方法

參考 http://superivan.iteye.com/blog/1131328 var ary = new Array("111","22","33","111"); var s = ary.

是copy了整理網上的內容,這是一個推薦

定義 問題 插件 寬度 移動端 wip 命名 www. 按鈕 因為公司用的 輪播組件是 aui 的 ui庫這個輪播有樣式單一等等很多的問題.... 包括滑動BUG(自己也踩了一個小坑,高度和寬度問題...需要設定好,滑動提示按鈕點 醜陋............ 無力吐槽 實

PHPCMS 手機門戶文章添加

php previous span cat scrip clas ive ast nbsp 一、在phpcms\modules\wap\index.php裏面,搜索下面這句代碼 if(!$r || $r[‘status‘] != 99) showmessage(L(‘in

DEDECMS文章模板的的鏈接地址

xtu ive tro hive get HP .class 沒有 url 需要修改 /include/arc.archives.class.php (默認)   搜索 GetPreNext( 或 上一篇 找到 GetPreNext()函數 在 $this-&g

Python多進程,同步互斥,信號量,鎖補充文章

python多進程 text stdout 執行 pause mat 1.7 hit splay 進程補充進程間的信號信號量(信號燈)進程的同步互斥Event事件Lock 鎖 進程補充 進程間的信號 信號是唯一的異步通信方法 一個進程向另一個進程發送一個信號來傳遞

教你用 Python 多執行緒爬京東商城商品評論(代理ip請閱讀

爬蟲永不停息 最近改進上一篇的爬蟲,不爬豆瓣了,改爬一爬京東評論,先放幾張圖研究看看先。 研究了一下,發現商品的id就是連結.html前面的數字。我們把它複製貼上下拉 1,對上一篇的代表進行修改和新增 class Spider(): def

織夢dedecms呼叫以及樣式修改

不管是仿模板還是設計模板,內容頁中肯定需要用到"上一篇,"下一篇"標籤呼叫。不需要記住,但需要能夠隨時找出來。剛才使用到,順帶記錄一下。   第一種,直接呼叫"上一篇,"下一篇"    上一篇是{dede:prenext get='pre'/}   下一篇是{dede:prenext g

查詢文章sql語句

查詢關鍵     獲取上一篇小於當前id的最大id     max(id)  相反下一篇min(id)     還要獲取當前欄目id $title_a=recinfo("select  

部落格系統詳情頁實現

其實很簡單,只要獲取當前文章id,通過order by,limit就可以實現,話不多說,上程式碼!! sql:       下一篇(id>5): select  id,title  where 

第10講 接第10講 SpringBoot事物管理

9,在accountServiceImpl中的方法中設定異常程式碼 int num =1/0,測試,   public void transferAccounts(int fromUser, int toUser, float account) { &n

CentOS 7 安裝phpredis和redis(接centos7安裝lnmp)

一、安裝擴充套件phpredis 1.PHP7 安裝redis 擴充套件phpredis cd /root/software wget https://github.com/edtechd/phpredis/archive/php7.zip unzip php7.zip 2.解壓目錄為phpre

【補充】網路流問題——最大帶權閉合路徑 2018 ACM-ICPC 中國大學生程式設計競賽線上賽 F. Clever King

今天把吉林大學的模板也試了一下,它使用的是所謂的Dinic演算法,比普通的BFS不知道快(高)到哪裡去了 程式碼: #include<iostream> #include<algorithm> #include<cstring> using na

destoon-7.0資訊開啟內容顯示不顯示

如圖: 檢查之後發現模板內容中沒有呼叫 需要在內容模板中新增上 {if $MOD[show_np]}         <div class="np">       

Spring Security的高階認識,在我們已經初步的瞭解到了Spring Secuity

2 自定義登入成功處理 預設情況下,登入成功後,Spring Security 會跳轉到之前引發登入的那個請求上。 AuthenticationSuccessHandler @Component("myAuthenticationSuccessHandler") public class

Python多程序,同步互斥,訊號量,鎖補充文章

from multiprocessing import Event,Process from time import sleep def wait_event1(): print("1想操作臨界區資源") e.wait() print("1開始操作臨界區資源",e.is_set()

Python多執行緒程式設計,執行緒鎖,以及補充多程序文章

程序補充 程序間的訊號 訊號是唯一的非同步通訊方法 一個程序向另一個程序傳送一個訊號來傳遞某種資訊,接受者根據傳遞的資訊來做相應的事 $ kill -l檢視系統訊號說明 $ kill -9 pid號對程序傳送訊號 訊號名稱 說明

Spark 小根堆(TreeSet)實現TopN問題-------基於文章的優化

第三步優化:假如資料量非常大的話,toList方法會產生記憶體溢位,使用treeSet方法可以解決 treeset既可以實現排序,還能有效的控制輸出的大小。 package day02 import java.net.URL import org.apach

針對prim最後的完善結果

1 edge* Graph::prim(int cur) { 2 if (cur >= this->vertexNum) { 3 return NULL; 4 } 5 int *weight = new int[this->vertex