gpt4 book ai didi

css - 防止伪元素触发悬停?

转载 作者:技术小花猫 更新时间:2023-10-29 10:21:47 27 4
gpt4 key购买 nike

如果我有标记:

<div class="a b"></div>

其中 .a 类具有与之关联的悬停类

并且 .b 类有一个与之关联的伪元素......像这样:

div
{
width: 100px;
height: 100px;
}
.a { background: red; display: inline-block; }
.a:hover { background: green; }

.b:after
{
content: '';
display: inline-block;
width: 100px;
height: 100px;
margin-left: 100px;
background: pink;
}

是否可以使用 css 来防止伪元素触发 .a 类悬停?

FIDDLE

最佳答案

以下 css 为现代浏览器提供了技巧 (not IE10-) :

.b:after {
pointer-events: none;
}

pointer-events: none 允许元素不接收悬停/点击事件。

参见 this fiddle .


注意

pointer-events 对非 SVG 元素的支持处于相对早期的状态。 developer.mozilla.org给你以下警告:

The use of pointer-events in CSS for non-SVG elements is experimental. The feature used to be part of the CSS3 UI draft specification but, due to many open issues, has been postponed to CSS4.

Chrome 对 display: inline-block 的框模型解释导致 the above fiddle 中出现闪烁.
如果您改用 display: block,您将获得对框的正确解释。
Firefox 没有这个问题。
为确保盒模型解释一致,请使用以下内容:

.b:after {
pointer-events: none;
display: block;
}

查看this fiddle在 Chrome 中查看闪烁效果。

关于css - 防止伪元素触发悬停?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16669889/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com