Question

如果我有标记：

<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

Answer 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以查看闪烁效果。

防止伪元素触发悬停？

1 个答案: