Snippets

Detect double click in CSS

The link will be only active if double-clicked.

<div class="test3">
  <span><input type="text" value="&nbsp;" readonly="true" />
  <a href="http://google.com">Double click me</a></span>
</div>

<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%;  /* Hacky */
	height: 301%; /* Hacky */
	z-index: 3; 
}
.test3 span input:focus { 
	background: transparent; 
	border: 0; 
	z-index: 1; 
}
</style>

Source: http://css-tricks.com/examples/CSSDoubleClick/...

Share this snippet

 

Comments (6) - Leave yours

  1. Andy McEniry said:

    We love your site Jean and this is a great snippet.

    I copied & paste the code and it didn’t work; then noticed a typo on line 6 that says tyle instead of style.

    Hope this is of help.

    • Jean-Baptiste Jung said:

      I agree with you, personally I don’t see why I’ll use this technique on one of my sites. But still, it is interesting to know how you can do it, isn’t it, Maybe one day a client would request this kind of feature.

      • Shekhar said:

        Jean,

        I guess client will ask you to make something happen on double click. He wouldnt be specifying how you do it. So CSS ?? Or JavaScript??

        Rather ‘ondblclick’ attribute is more handy & perfect way to do the same.

        Anyway – IT’S ALWAYS GOOD TO KNOW WHAT WE CAN DO :) .

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!