Question

我希望在悬停元素时将一些样式应用于：before伪元素，而不是在悬停：before元素本身时。有可能吗？

HTML：

<div class="box">Hover this to get green</div>

的CSS：

.box {
  border: 1px solid black;
}

.box:before {
  border: 1px solid black;
  transform: translateY(20px);
  position: absolute;
  color: red;
  content: "Hovering this should not make it green";
}

.box:hover:before {
  color: green;
}

JSFiddle

Answer 1

您可以在伪元素上设置pointer-events: none，这也将从中删除悬停事件。

.box {
  border: 1px solid black;
}
.box:before {
  border: 1px solid black;
  transform: translateY(20px);
  position: absolute;
  color: red;
  content: "Hovering this should not make it green";
}
.box:hover:before {
  color: green;
}
.box:before {
  pointer-events: none;
}

<div class="box">Hover this to get green</div>

不适用：悬停在：元素之前悬停：

1 个答案: