纯CSS实现双击链接跳转功能

<!DOCTYPE html >

<html>

<head>

<title>双击打开链接</title>

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

<style type="text/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%;

height: 301%;

z-index: 3;

}

.test3 span input:focus {

background: transparent;

border: 0;

z-index: 1;

}

</style>

</head>

<body>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

<div class="test3">

<span><input type="text" value="&nbsp;" readonly="true" />

<a href="http://www.baidu.com">双击我</a></span>

</div>

</body>

<html>

时间: 2024-10-23 03:23:04

纯CSS实现双击链接跳转功能的相关文章

纯CSS焦点轮播效果-功能可扩展

纯CSS3实现模拟焦点轮播效果,支持JQ等扩展各项功能.废话少说,直接贴代码. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> 5 <meta name="format-detection" cont

JQuery Pagination 分页插件 增加了首页尾页以及跳转功能

JQuery分页插件 挺好用的 但是官方是没有提供首页尾页以及跳转功能 我觉得这个功能可以有,于是就改进了一下 一个js一个css从连接里面下 链接:http://pan.baidu.com/s/1nvaq99R 密码:9nfb 上效果图: 页面代码 <script type="text/javascript"> //分页查询开始 $(document).ready(function() { getDataList(0, null); }); var rows = 10;

纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器)

原文:纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器) 虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTML结构: <body> <ul id="navWrapper"> <li> <a href="#">Menu A</a> <ul

利用target的特性,可以实现纯css的tab效果切换

基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1" class="tab">This is a tab1</div> :target{ color:red; } 但点击a标签的时候,连接到id是tab1的div,对这个div起作用color:red; 如: <a href="#tab"

如何使用纯 CSS 制作四子连珠游戏

序言:你有没有想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决?这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较复杂,而本人水平有限,翻译必有不恰当之处,望指正. 原文:How the Roman Empire Made Pure CSS Connect 4 Possible 翻译:nzbin 实验是学习新技巧.思考新想法.并突破自身极限的有趣的方式."纯 CSS"演示很早就有了,但是随着浏览器和

纯css实现手机通讯录

我们经常在手机上看到通讯录列表,这类布局一般有两个显著的效果 首字母吸顶 快速定位 下面我们来实现一下 页面结构 这里页面结构很简单,就是两个列表 <div class="con"> <!--联系人列表--> <div class="contacts" id="contacts"> <dl>A</dt> <dt>a1</dt> <dt>a2</d

CSS之纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)

图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的.那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如果你也觉得很震撼,推荐给你的朋友吧. 1.正方形 最终效果: CSS代码如下: 复制代码 代码如下: #square { width: 100px; height: 100px; background: red; }

纯CSS实现的非常酷的卡通肖像,艺术与编程结合的典范

产品设计技术趋势 当前产品设计和开发的一个主要技术趋势除了响应式外, 还有尽量使用CSS/HTML5技术替代图片,这样可以获得很好的设计扩展性和页面访问性能. CSS卡通实例 下面就是一个英国WEB工程师设计开发的一个非常酷的卡通头像,使用纯CSS实现,还可以简单的切换肤色:) 示范页面访问链接,辛普森家族头像 注:辛普森家族(Simpson family)是美国动画情景喜剧<辛普森一家>中的一支虚构家族. 使用的技术 和艺术家素描使用的技术有异曲同工之处,首先把每个人物的脸拆解为不同的形状,

iOS:删除storyBoard,纯代码实现UITabBarController的视图切换功能

storyboard是一个很强大的编写代码的辅助工具,可以帮助布局多个视图之间的联系,既直观又能减少代码量:但是,作为一个程序员,在不使用storyboard的情况下,纯代码编写是必须的技能. 下面就用纯代码实现纯代码实现UITabBarController的视图切换功能,咱就实现三个视图之间的转换吧,代码不多,容易看的明白. 步骤: 1.删除storyboard故事板和UIViewController 2.创建三个控制器类,均继承自UIViewController,分别为FirstViewCo