css模擬實現雙擊效果程式碼例項
在css中無所謂雙擊事件,比如一個連結,只要點選一下預設就可以實現跳轉。
本章節分享一段程式碼例項,必須雙擊連結才會實現跳轉效果。
程式碼例項:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .antzone span { position: relative; } .antzone span a { position: relative; z-index: 2; } .antzone span a:hover, .antzone span a:active { z-index: 4; } .antzone span input { background: transparent; border: 0; cursor: pointer; position: absolute; top: -1px; left: 0; z-index: 3; } .antzone span input:focus { background: transparent; border: 0; z-index: 1; } </style> </head> <body> <div class="antzone"> <span> <input type="text" value=" " readonly/> <a href="http://www.softwhy.com">螞蟻部落</a> </span> </div> </body> </html>
上面成功模擬實現了雙擊事件,下面簡單介紹一下它的實現原理。
預設狀態下,文字框是透明且z-index值高於連結a,所以它覆蓋在連結a之上。
當點選文字框被點選之後,也就是獲取焦點之後,元素的z-index就會發生變化,再次點選就可以跳轉了。
相關文章
- css模擬實現雙擊事件程式碼例項CSS事件
- javascript模擬實現ArrayList效果程式碼例項JavaScript
- js模擬實現多型效果程式碼例項JS多型
- 模擬實現連結title效果程式碼例項
- 模擬實現文字框游標效果程式碼例項
- javascript模擬實現滾動條效果程式碼例項JavaScript
- javascript模擬實現連結的title效果例項程式碼JavaScript
- css3和js模擬翻頁效果程式碼例項CSSS3JS
- css實現矩形切角效果程式碼例項CSS
- canvas模擬彈幕效果程式碼例項Canvas
- 模擬發放紅包效果程式碼例項
- css實現圖片灰度效果程式碼例項CSS
- 模擬實現Object.is()方法程式碼例項Object
- javascript模擬實現toAarray()方法程式碼例項JavaScript
- css3實現的折角效果程式碼例項CSSS3
- css實現的div垂直居中效果程式碼例項CSS
- CSS實現div層半透明效果程式碼例項CSS
- CSS實現的柱狀圖效果例項程式碼CSS
- js模擬實現hashCode()方法程式碼例項JS
- js模擬實現replaceAll()函式程式碼例項JS函式
- js模擬實現alert()函式彈出警告視窗效果程式碼例項JS函式
- css3實現的打折卡效果程式碼例項CSSS3
- css實現div全屏水平垂直居中效果程式碼例項CSS
- css實現的三列等高效果程式碼例項CSS
- css實現的彎彎的月亮效果程式碼例項CSS
- CSS3 實現的鐘表效果程式碼例項CSSS3
- css3實現的毛玻璃效果程式碼例項CSSS3
- css3實現的打字機效果程式碼例項CSSS3
- css3實現的圓角效果程式碼例項CSSS3
- css3實現的氣泡效果程式碼例項CSSS3
- css切角效果程式碼例項CSS
- css模糊效果程式碼例項CSS
- jQuery模擬實現滑鼠點選事件程式碼例項jQuery事件
- 模擬實現select下拉選單例項程式碼單例
- css3實現的文字下滑出現效果程式碼例項CSSS3
- css實現梯形程式碼例項CSS
- css實現圖片上下左右居中效果程式碼例項CSS
- css實現的網頁三列布局效果程式碼例項CSS網頁