css - 悬停 > :before > Hover ? 怎么样？

Question

我在 Less 中编写了一个 mixin，它向视频标签添加了一个播放按钮。它看起来像这样:

.playVideoButton(@size: 64px) {
  &:before {
    content: "";
    width: @size;
    height: @size;
    top: 50%;
    left: 50%;
    display: none;
    position: absolute;
    .transform(translate(-50%, -50%));
    .border-radius(50%);
    border: 2px solid #fff;
    background-color: rgba(0, 0, 0, 0.35);
  }
  &:after {
    width: 0;
    height: 0;
    content: "";
    border-top: @size / 4 solid transparent;
    border-bottom: @size / 4 solid transparent;
    border-left: @size / 2.4 solid #fff;
    top: 50%;
    left: 50%;
    display: none;
    position: absolute;
    .transform(translate(-35%, -50%));
  }
  &:hover {
    &:before {
      display: block;
      &:hover {
        background-color: rgba(0, 0, 0, 0.60);
      }
    }
    &:after {
      display: block;
    }
  }
}

它工作正常，但我想为 :before 制作第二个悬停效果。所以我在最后写: &:hover > &:before > &:hover {background-color: rgba(0, 0, 0, 0.60);} 但是当我悬停 :before 元素我没有得到背景不透明度的变化。

Chrome 开发工具隐藏了伪元素的悬停设置。那么没有JavaScript就不能修改它们吗？

Answer 1

目前您不能将:hover(或任何其他伪类附加到伪元素)。 W3C Spec for pseudo-elements 中的以下文本暗示了这一点:

Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector.

和下一个来自 W3C Spec for selector syntax :

One pseudo-element may be appended to the last sequence of simple selectors in a selector.

伪类(如 :hover、:link 等)是简单的选择器，伪元素只能附加在所有这些简单的选择器之后。因此，它排除了 div:hover:before:hover 或 div:before:hover 的可能性。

---

在下面的代码片段中，这是一个非常简单的片段，您可以看到 div:after:hover 选择器如何在 div:hover:after 匹配时永远不会匹配。

div:after {
  display: block;
  content: 'World';
  background: beige;
}
div:after:hover {
  background: green;
}
div:hover:after {
  border: 1px solid green;
}
div:hover {
  border: 1px solid red;
}

<div>Hello!</div>

您应该考虑使用实际的子元素(而不是伪元素)创建播放按钮，然后将 :hover 选择器附加到