防止伪元素触发悬停？

Posted 2023-05-08

【中文标题】防止伪元素触发悬停？

【英文标题】：prevent a pseudo element from triggering hover?

【发布时间】：2013-05-16 05:07:22

【问题描述】：

如果我有标记：

<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

【问题讨论】：

你能提供一下你想要什么以及你拥有什么的快照吗？

Afaik 这是不可能的，因为伪元素是真实元素的子元素。

not 选择器有帮助吗？

【参考方案1】：

以下 css 为现代浏览器解决了问题(not IE10-)：

.b:after 
  pointer-events: none;

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

见this fiddle。

---

注意

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

在 CSS 中对非 SVG 元素使用指针事件是 实验性的。 该功能曾经是 CSS3 UI 草案的一部分 规范，但由于许多未解决的问题，已推迟到 CSS4。

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

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

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

【讨论】：

嗯，这是个好主意，但我看到了闪烁……有什么想法吗？

嗯，我看不到闪烁。您使用哪种浏览器/操作系统？

我在 windows7 上使用 chrome

@tessi 我刚刚注意到一些事情：如果我从 bottom 悬停到 .b:after - 那么我会得到闪烁，但如果我从其他方向悬停到它- 我不明白闪烁。去图吧。

我可以在 Chrome 中重现这个（使用 Linux）。 Firefox 完美运行。可能是 chrome(ium) 错误（尽管我在他们的错误跟踪器中找不到匹配的问题）。结论：最好不要在跨浏览器生产代码中使用pointer-events。