防止伪元素触发悬停？

小编典典

防止伪元素触发悬停？

css

如果我有标记：

<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类悬停？

小提琴

阅读 292

2020-05-16

共1个答案

小编典典

以下CSS为现代浏览器（而非IE10-）提供了诀窍：

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

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

警告

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

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

Chrome对Box模式的解释display: inline- block导致上述小提琴闪烁。
如果display: block改用，您将获得对方框的正确解释。
Firefox没有这个问题。
为了确保一致的盒模型解释，请使用以下命令：

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

在Chrome中查看此小提琴以查看闪烁效果。

2020-05-16