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

2024-09-05 12:16:57

字体：大中小

来源：转载

供稿：网友

一般情况下，链接只需要鼠标点击一下就打开网页了，这下好了，用CSS可以把链接定义成双击才能打开链接，然后跳转到指定的网址，是CSS2代码，非CSS3/html5,有兴趣的参考。

<!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 class="test3"><span><input type="text" value=" " readonly="true" />双击我</SPAN>
</div>
</div>
<div class=page1>
<p align="center" class="pageLink"></p>
</div>

<div class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/09-05/1556436.html'>CSS3使用计数器自动添加数字序号功能</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/09-05/1556438.html'>CSS布局示例:画梅花2扑克牌</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您没什么话要说吗？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

学习交流