CSS中有`pointer-events:hoverOnly`或类似内容？

Question

刚刚pointer-events在CSS中玩过属性.

我有一个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;
}

Answer 1

仅悬停.这很容易.没有JS ...也防止链接默认操作.

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

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

编辑:IE 11及以上版本支持 http://caniuse.com/#search=pointer-events

Answer 2

"窃取"Xanco的答案,但没有那个丑陋,丑陋的jQuery.

代码段:注意DIV的顺序相反

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

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

Answer 3

我认为单凭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

Answer 4

您还可以检测到不同元素上的悬停并将样式应用于其子元素，或使用其他css选择器（例如相邻的子元素等）。

这取决于您的情况。

在父元素上悬停。我这样做：

.child {
    pointer-events: none;
    background-color: white;
}

.parent:hover > .child {
    background-color: black;
}