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元素时，我没有改变背景不透明度。

Chromes Dev Tool隐藏伪元素的悬停设置。那么没有JavaScript就无法修改它们吗？

Answer 1

目前，您无法将:hover（或任何其他伪类附加到伪元素）。 W3C Spec for pseudo-elements：

中的以下文字暗示了这一点

每个选择器只能出现一个伪元素，如果存在， 必须出现在表示选择器主题的简单选择器序列 之后。

以及W3C Spec for selector syntax中的以下内容：

一个伪元素可能 附加到选择器中的最后一个简单选择器序列 。

伪类（如: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选择器附加到其中。

悬停＆gt; ：之前＆gt;悬停？怎么样？

1 个答案: