悬停 > :before > 悬停？如何？

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.

Pseudo-类（如 :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 选择器。

悬停 > :before > 悬停？如何？

Hover > :before > Hover ? How?

css

less

pseudo-element