CSS实现超级链接需要通过双击后跳转
发布时间：2013-10-12 17:45:06 作者：佚名 
我要评论
我要评论超级链接需要双击后跳转如何实现，其实很简单，在本文将为大家介绍下具体的实现方法，感兴趣的朋友不要错过
CSS代码
.test3 span {
position: relative;
}
.test3 span a {
position: relative;
z-index: 2;
}
.test3 span a:hover, .test3 span a:active {
z-index: 4;
}
.test3 span input {
background: transparent;
border: 0;
cursor: pointer;
position: absolute;
top: -1px;
left: 0;
width: 101%; /* Hacky */
height: 301%; /* Hacky */
z-index: 3;
}
.test3 span input:focus {
background: transparent;
border: 0;
z-index: 1;
}
html代码
<div class="test3">
<span><input type="text" value=" " readonly="true" />
<a href="http://www.baidu.com">Double click me</a></span>
</div>
复制代码
代码如下:.test3 span {
position: relative;
}
.test3 span a {
position: relative;
z-index: 2;
}
.test3 span a:hover, .test3 span a:active {
z-index: 4;
}
.test3 span input {
background: transparent;
border: 0;
cursor: pointer;
position: absolute;
top: -1px;
left: 0;
width: 101%; /* Hacky */
height: 301%; /* Hacky */
z-index: 3;
}
.test3 span input:focus {
background: transparent;
border: 0;
z-index: 1;
}
html代码
复制代码
代码如下:<div class="test3">
<span><input type="text" value=" " readonly="true" />
<a href="http://www.baidu.com">Double click me</a></span>
</div>
相关文章
- 这篇文章主要介绍了纯CSS实现网页内部锚点跳转时上下偏移的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随2020-04-09
- 这篇文章主要介绍了使用CSS中的meta实现web定时刷新或跳转的方法,比使用JavaScript脚本实现起来更加简单一些,需要的朋友可以参考下2015-06-05
这篇文章主要介绍了CSS页面中点击超链接如何跳转新的页面,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-09-13
最新评论