在 CSS 中是否有一个“指针事件: hoverOnly”或类似的命令？

小开

最佳答案

我不认为这是可能的实现你的目标在 CSS 单独。然而，正如其他贡献者所提到的，在 JQuery 中做这件事非常容易。我是这么做的:

超文本标示语言

<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

小开

“窃取”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>

小开

只悬停。这是非常容易的。没有 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

小开

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

这取决于你的情况。

在父元素盘旋上，我做了这个:

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


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

小开

针对您的请求的纯 CSS 解决方案(不透明属性的存在只是为了说明转换的需要) :

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

它的作用:

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

但是如果不设置转换计时器，div 将在鼠标移动时取消悬停状态; 当鼠标在元素内移动时，悬停状态将闪烁。您可以通过使用上面的代码和不透明属性来感知这一点。

设置从悬停状态过渡的延迟可以修复它。2s值可以根据您的需要进行调整。

转场调整的学分: 这个答案上的小菜一碟。

小开

纯 CSS，不需要 Jquery:

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

小开

我使用相同大小的父/容器的 :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>