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模拟实现双击事件代码实例属于前端实例代码,有关更多实例代码大家可以查看。