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

Jimmery Published at Java

Jimmery

Just been playing about with pointer-events property in CSS.

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

So all click commands go through the div to the one below it, but the div can report whether the mouse is above it or not still.

Can anyone 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;
}

Xanco

I don't think it's possible to achieve your aims in CSS alone. However, as other contributors have mentioned, it's easy enough to do in JQuery. Here's how I've done 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 (unchanged)

.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 the JSFiddle: http://www.jsfiddle.net/ReZ9M

Collected from the Internet

Please contact [email protected] to delete if infringement.