Is there a `pointer-events:hoverOnly` or similar in CSS?

Solution 1:

Hover only. It is very easy. No JS... Prevent link default action too.

a:hover {
	color: red;
}
a:active {
	pointer-events: none;
}

<a href="www.google.com">Link here</a>

Edit: supported in IE 11 and above http://caniuse.com/#search=pointer-events

Solution 2:

"Stealing" Xanco's answer but without that ugly, ugly jQuery.

Snippet: Notice DIVs are in reverse order

.layer {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 400px;
  width: 400px;
}

#bottomlayer {
  z-index: 10
}

#toplayer {
  z-index: 20;
  pointer-events: none;
  background-color: white;
  display: none
}

#bottomlayer:hover~#toplayer {
  display: block
}

<div id="bottomlayer" class="layer">Bottom layer</div>
<div id="toplayer" class="layer">Top layer</div>

Is there a `pointer-events:hoverOnly` or similar in CSS?

Solution 1:

Solution 2:

Related

Recent Posts