css模拟实现双击事件代码实例

快乐打工仔 分类:实例代码

在css中是没有双击事件的,但是我们可以模拟实现。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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.pipipi.net">犀牛前端部落</a>
    </span>
  </div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现原理。

默认状态下,文本框是覆盖在链接a之上,只不过这个文本框是透明的,且边框为0,我们看不到。

.antzone span a {
  position: relative;
  z-index: 2;
}

链接a的z-index属性为2

.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之上。

当第一次点击的时候,那么文本框就会获取焦点:

.antzone span input:focus {
  background: transparent;
  border: 0;
  z-index: 1;
}

这时候z-index属性值变成1,那么链接a就覆盖在文本框之上。

.antzone span a:hover, .antzone span a:active {
  z-index: 4;
}

当鼠标悬浮于链接智商,或者鼠标按下的时候,链接的z-index值都是4,那么点击行为自然会生效。

关于z-index可以参阅CSS z-index一章节。

css模拟实现双击事件代码实例,这样的场景在实际项目中还是用的比较多的,关于css模拟实现双击事件代码实例就介绍到这了。

css模拟实现双击事件代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容