Is there an event pointer: hoverOnly or similar in CSS?

Question

Just played with the pointer-events property in CSS.

I have a div that I want to be invisible to all mouse events except :hover .

Thus, all click commands go through the div to what is below it, but the div can tell whether it is above it or not.

Can someone tell me if this can be done?

HTML:

 <div class="layer" style="z-index:20; pointer-events:none;">Top layer</div> <div class="layer" style="z-index:10;">Bottom layer</div> 

CSS

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

Answer 1

I do not consider it possible to achieve your goals only in CSS. However, as other participants noted, in jQuery, it’s easy enough to do this. Here is how I did it:

HTML

 <div id="toplayer" class="layer" style="z-index:20; pointer-events:none; background-color: white; display: none;">Top layer</div><div id="bottomlayer" class="layer" style="z-index:10;">Bottom layer</div> 

CSS (no change)

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

JQuery

 $(document).ready(function(){ $("#bottomlayer").hover( function() { $("#toplayer").css("display", "block"); }, function() { $("#toplayer").css("display", "none"); } ); }); 

Here's JSFiddle: http://www.jsfiddle.net/ReZ9M

Answer 2

Mouse over only. It is very simple. No JS ... Also disable the default action for links.

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

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

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

Answer 3

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

HTML: (Note that the DIVs are in reverse order)

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

CSS

 .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} 

Updated script

Answer 4

You can also detect hovering on another element and apply child styles to it or use other css selectors, such as adjacent children, etc.

It depends on your case.

In parent mode. I have done this:

 .child { pointer-events: none; background-color: white; } .parent:hover > .child { background-color: black; } 

Answer 5

A pure CSS solution for your request (the opacity property simply illustrates the need for transitions):

 .hoverOnly:hover { pointer-events: none; opacity: 0.1; transition-delay: 0s; } .hoverOnly { transition: ,5s all; opacity: 0.75; transition-delay: 2s; } 

What does he do:

When the mouse enters the field, it causes the state :hover . However, in this state, pointer events are disabled.

But if you do not set transition timers, the div will cancel the freezing state when moving the mouse; the freezing state will flicker when the mouse moves inside the element. You can perceive this using the code above with opacity properties.

Setting a delay to transition from a hover state corrects it. The value 2s can be changed according to your needs.

Conversion credits : patad for this answer .