[解決済み] CSSに`pointer-events:hoverOnly`のようなものはありますか？

質問

ちょうど pointer-events プロパティで遊んでいます。

私は div を除いて、すべてのマウスイベントから見えないようにしたい。 :hover .

つまり、すべてのクリックコマンドは div を経由してその下の 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;
}

どのように解決するのですか？

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

以下はJSFiddleです。 http://www.jsfiddle.net/ReZ9M