Html CSS 中是否有`pointer-events:hoverOnly` 或类似内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22168420/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a `pointer-events:hoverOnly` or similar in CSS?
提问by Jimmery
Just been playing about with pointer-eventsproperty in CSS.
刚刚pointer-events在 CSS 中玩弄属性。
I have a divthat I want to be invisible to all mouse events, except for :hover.
我有一个div我想对所有鼠标事件不可见，除了:hover.
So all click commands go through the divto the one below it, but the div can report whether the mouse is above it or not still.
所以所有的点击命令都经过div它下面的那个，但是 div 可以报告鼠标是否在它上面。
Can anyone tell me if this can be done?
谁能告诉我这是否可以做到？
HTML:
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:
CSS：
.layer {
position:absolute;
top:0px;
left:0px;
height:400px;
width:400px;
}
采纳答案by Xanco
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:
我认为仅靠 CSS 不可能实现您的目标。但是，正如其他贡献者所提到的，在 JQuery 中很容易做到。这是我如何做到的：
HTML
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 (unchanged)
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");
}
);
});
Here's the JSFiddle: http://www.jsfiddle.net/ReZ9M
这是 JSFiddle：http: //www.jsfiddle.net/ReZ9M
回答by Свободен Роб
Hover only. It is very easy. No JS... Prevent link default action too.
仅悬停。这很容易。没有 JS ... 也防止链接默认操作。
a:hover {
color: red;
}
a:active {
pointer-events: none;
}<a href="www.google.com">Link here</a>Edit: supported in IE 11 and above http://caniuse.com/#search=pointer-events
编辑：支持 IE 11 及更高版本 http://caniuse.com/#search=pointer-events
回答by Niet the Dark Absol
"Stealing" Xanco's answer but without that ugly, ugly jQuery.
“窃取” Xanco 的答案，但没有那个丑陋、丑陋的 jQuery。
Snippet: Notice DIVs are in reverse order
片段：注意 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>回答by maciejmatu
You can also detect hover on different element and apply styles to it's child, or using other css selectors like adjacent children, etc.
您还可以检测悬停在不同元素上并将样式应用于它的子元素，或使用其他 css 选择器，如相邻的子元素等。
It depends on your case though.
不过也要看你的情况。
On parent element hover. I did this:
在父元素上悬停。我这样做了：
.child {
pointer-events: none;
background-color: white;
}
.parent:hover > .child {
background-color: black;
}
回答by Mindwin
Pure CSS solution to your request (the opacity property is there just to illustrate the need for the transitions):
对您的请求的纯 CSS 解决方案（opacity 属性只是为了说明转换的需要）：
.hoverOnly:hover {
pointer-events: none;
opacity: 0.1;
transition-delay: 0s;
}
.hoverOnly {
transition: ,5s all;
opacity: 0.75;
transition-delay: 2s;
}
What it does:
它能做什么：
When the mouse enters the box, it triggers the :hoverstate. However, in that state, the pointer-events are disabled.
当鼠标进入盒子时，它会触发:hover状态。但是，在该状态下，指针事件被禁用。
But if you do not set the transitions timers, the div will cancel the hover state when the mouse moves; the hover state will flicker while the mouse is moving inside the element. You can perceive this by using the code above with the opacity properties.
但是如果不设置transitions timers，鼠标移动时div会取消hover状态；当鼠标在元素内移动时，悬停状态会闪烁。您可以通过使用带有 opacity 属性的代码来感知这一点。
Setting a delay to the transition out of the hover state fixes it. The 2svalue can be tweaked to suit your needs.
设置从悬停状态过渡的延迟可以修复它。2s可以调整该值以满足您的需要。
Credits to transitions tweak: patadon this answer.
转换调整的学分：patadon this answer。
回答by Bariq Dharmawan
Just pure css, doesn't need jquery:
只是纯css，不需要jquery：
div:hover {pointer-events: none}
div {pointer-events: auto}
回答by Jeremy Sabath
I use the :hoverpseudo-element of an equal-sized parent/container to simulate a hover over my overlay div, then set the overlay's pointer-eventsto noneto pass through clicks to elements below.
我用: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>