css模擬實現雙擊事件程式碼例項

admin發表於2017-04-14
CSS事件

在css中是沒有雙擊事件的，但是我們可以模擬實現。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  padding: 0;
  margin: 0;
}
.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;
  width: 101%;  /* Hacky */
  height: 301%; /* Hacky */
  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>

上面的程式碼實現了我們的要求，下面介紹一下它的實現原理。

預設狀態下，文字框是覆蓋在連結a之上，只不過這個文字框是透明的，且邊框為0，我們看不到。

[CSS] 純文字檢視 複製程式碼
.antzone span a {
  position: relative;
  z-index: 2;
}

連結a的z-index屬性為2

[CSS] 純文字檢視 複製程式碼
.antzone span input {
  background: transparent;
  border: 0;
  cursor: pointer;
  position: absolute;
  top: -1px;
  left: 0;
  width: 101%;  /* Hacky */
  height: 301%; /* Hacky */
  z-index: 3;
}

文字框的z-index的屬性值為3，所以它會覆蓋在連結a之上。

當第一次點選的時候，那麼文字框就會獲取焦點:

[CSS] 純文字檢視 複製程式碼
.antzone span input:focus {
  background: transparent;
  border: 0;
  z-index: 1;
}

這時候z-index屬性值變成1，那麼連結a就覆蓋在文字框之上。

[CSS] 純文字檢視 複製程式碼
.antzone span a:hover, .antzone span a:active {
  z-index: 4;
}

當滑鼠懸浮於連結智商，或者滑鼠按下的時候，連結的z-index值都是4，那麼點選行為自然會生效。

關於z-index可以參閱CSS z-index一章節。

相關文章