在CSS中是否有`pointer-events：hoverOnly`或类似的？ [英] Is there a `pointer-events:hoverOnly` or similar in CSS?

问题描述

刚刚在CSS中使用指针事件属性。

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

我有一个<$ c $除了：hover 。

因此，所有的点击命令都通过 div 到它下面的一个，但div可以报告鼠标是在它上面还是不在上面。

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

推荐答案

可能实现你的目标在CSS单。然而，正如其他贡献者所提到的，在JQuery中很容易做到。以下是我的操作方式：

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（未更改）

.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");
        }
    );
});

这里是JSFiddle： http://www.jsfiddle.net/ReZ9M

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

这篇关于在CSS中是否有`pointer-events：hoverOnly`或类似的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！