Double Click with CSS

by Johnny Lee

HTML

<h1>Test 1</h1>
<div class="test3">
  <span><input type="text" value="&nbsp;" readonly="true" />
    <a href="http://google.com" target="_blank">Double click me</a>
  </span>
</div>
<p>Tested on Chrome, FireFox and IE9</p>
<h1>Test 2</h1>
<span class="dblclick-wrap">
  <a class="dblclick" href="http://google.com" target="_blank">Double click me</a>
  <span></span>
</span>
<p>Tested on Chrome, FireFox and IE9</p>

CSS

body {
    font-family: Verdana, Arial;
    font-size: 1.2em;
    cursor: text;
}
h1 {
    color: blue;
    font-weight: bold;
    margin: 8px;
    border-bottom: solid 1px gray;
}
p {
    margin: 8px;
    cursor: text;
}

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

/* Test 2 */
.dblclick-wrap {
    position: relative; /* For absolute positioning within */
}

.dblclick {
    position: relative; /* So z-index works later, but no surprises now */
    /* background: blue; Uncomment to test coverage */
}

.dblclick + span {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 103%; /* Gotta do this instead of right: 0; */
    bottom: -1px;
    z-index: 1;
    /* background-color: red; Uncomment background property to test coverage */
}

.dblclick + span:active {
    left: -9999px; 
}

.dblclick:hover {
    z-index: 2;
}