Question

那里有类似的问题，但显然与我未发现的问题相同。问题是：

在将:: before伪（而不是宿主元素）悬停时，如何在:: after伪元素上应用一些样式？

代码示例：

.contact {
  position: relative;
}

.contact::before {
  content: '';
  position: absolute;
  top: 0;
  right: -10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: hotpink;
}

.contact::after {
  content: 'Preferred contact';
  font-size: 10px;
  color: #fff;
  padding: 5px 10px;
  position: absolute;
  top: 0;
  right: -15px;
  transform: translateX(100%);
  border-radius: 5px;
  background-color: rgba(0, 0, 0, .5);

  display: none;
}

.contact:hover::after {
  display: block;
}

    <span class="contact">skype_hello85</span>

因此，当将元素（跨度）本身悬停时，一切都很好。但我希望:: after仅在:: be悬停时显示，而不在主机元素本身时显示。

感谢您的帮助！

Answer 1

您可以将样式应用于位于第一个选择器DOM级别内的元素。

例如：

<div class="wrapper">
    ::before
    <p>Lorem ipsum dolor</p>
    ::after
</div>

wrapper类在此处包含 p 标记和两个伪元素（ :: before 和 :: after ），它们所有这些都位于一个DOM级别中，并且不可能在 :: after 元素上开发 :: before 元素的样式。唯一的方法是将样式应用于wrapper CSS类或使用JS。

您可以获得here的更多信息。

悬停:: before伪（而不是宿主元素）时，如何在:: after伪元素上应用样式？

1 个答案: