CSS中是否有'pointer-events:hoverOnly'或类似的语句?

xzlaal3s  于 2023-03-20  发布在  其他
关注(0)|答案(7)|浏览(226)

刚才一直在玩CSS中的pointer-events属性。
我有一个div,我希望它对所有鼠标事件都不可见,除了:hover
所以所有的click命令都经过div到达它下面的一个,但是div可以报告鼠标是否在它上面。
谁能告诉我这是否可行?
超文本:

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

qjp7pelc1#

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

imzjd6km

imzjd6km2#

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

gc0ot86w3#

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

jhkqcmku

jhkqcmku4#

你也可以检测不同元素上的鼠标悬停,并将样式应用到它的子元素上,或者使用其他css选择器,如相邻子元素等。
这取决于你的情况虽然。
在父元素悬停时。我是这样做的:

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

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

hs1rzwqc5#

纯粹的CSS解决方案来满足您的要求(opacity属性只是为了说明过渡的需要):

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

它的作用:
当鼠标进入方框时,它触发:hover状态,但是在该状态下,指针事件被禁用。
但是如果你没有设置转换计时器,当鼠标移动时div将取消悬停状态;当鼠标在元素内部移动时,悬停状态会 Flink 。2你可以通过使用上面的代码和opacity属性来感知这一点。
设置一个从悬停状态转换出来的延迟就可以解决这个问题。2s的值可以根据你的需要进行调整。
转场调整的制作者名单:在this answer上。

gywdnpxw

gywdnpxw6#

只是纯css,不需要jquery

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

vwoqyblh7#

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

相关问题