css模拟实现双击效果代码实例
分类：javascript
在css中无所谓双击事件，比如一个链接，只要点击一下默认就可以实现跳转。
本章节分享一段代码实例，必须双击链接才会实现跳转效果。
代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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.pipipi.net">前端教程网</a>
</span>
</div>
</body>
</html>
上面成功模拟实现了双击事件，下面简单介绍一下它的实现原理。
默认状态下，文本框是透明且z-index值高于链接a，所以它覆盖在链接a之上。
当点击文本框被点击之后，也就是获取焦点之后，元素的z-index就会发生变化，再次点击就可以跳转了。