CSS中是否存在`pointer-events：hoverOnly`或类似的东西？

小编典典

CSS中是否存在`pointer-events：hoverOnly`或类似的东西？

css

刚刚在玩pointer-eventsCSS中的属性。

我div想让所有鼠标事件都看不到，除了:hover。

因此，所有单击命令都将div转到其下一个，但div可以报告鼠标是否在其上方。

谁能告诉我是否可以做到？

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

阅读 380

2020-05-16

共1个答案

小编典典

我认为仅凭CSS不可能实现您的目标。但是，正如其他贡献者所提到的那样，在JQuery中做起来很容易。这是我的操作方法：

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

2020-05-16