html - CSS 中是否有 `pointer-events:hoverOnly` 或类似的？

Question

一直在玩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;
}

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

Answer 5

满足您的要求的纯 CSS 解决方案（不透明度属性只是为了说明过渡的需要）：

.hoverOnly:hover {
    pointer-events: none;
    opacity: 0.1;
    transition-delay: 0s;
}
.hoverOnly {
    transition: ,5s all;
    opacity: 0.75;
    transition-delay: 2s;
}

它能做什么：

当鼠标进入盒子时，它会触发:hover状态。但是，在该状态下，指针事件被禁用。

但是如果不设置transitions timers，则div会在鼠标移动时取消hover状态；当鼠标在元素内移动时，悬停状态会闪烁。您可以通过使用上面的代码和 opacity 属性来感知这一点。

设置从悬停状态过渡的延迟可以修复它。2s可以调整该值以满足您的需求。

过渡调整的功劳：patad on this answer。

Answer 6

只是纯css，不需要jquery：

div:hover {pointer-events: none}
div {pointer-events: auto}

Answer 7

我使用:hover相同大小的父/容器的伪元素来模拟悬停在我的覆盖 div 上，然后将覆盖设置pointer-events为none通过点击传递到下面的元素。

let button = document.getElementById('woohoo-button');
button.onclick = () => console.log('woohoo!');

let overlay = document.getElementById('overlay');
overlay.onclick = () => console.log(`Better change my pointer-events property back to 'none'`);

#container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: green;
  width: 300px;
  height: 300px;
}

#overlay {
  background-color: black;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  /* Pass through clicks */
  pointer-events: none;
}


/* 
   Set overlay hover style based on
   :hover pseudo-element of its  
   container
*/
#container:hover #overlay {
  opacity: 0.5;
}

#woohoo-button {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
}

<div id="container">
  <div id="overlay"></div>
  <button id="woohoo-button">
    Click Me
  </button>
</div>