css模擬實現雙擊效果程式碼例項

antzone發表於2017-04-08
原文網址 : https://www.softwhy.com/article-6320-1.html
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就會發生變化，再次點選就可以跳轉了。

相關文章