:hover 对 p:after 的影响 div

Question

我似乎无法正确激活父元素 p 中的 :hover 状态 div

对于父级 div 中的所有 p 元素，有一个宽度为 0 的 :after 以在以下情况下创建下划线徘徊。当悬停 p 时，我希望宽度从“0”变为“2em”。

我不确定如何在悬停时正确定位 p 和 :after。

我觉得它看起来应该像下面这样。

HTML

<div class="parent">
    <p>Menu Option A</p>
    <p>Menu Option B</p>
</div>

CSS

.top_menu_wrapper p:after {
  content: "";
  display: block;
  height: 3px;
  width: 0em;
  background: white;
  margin: auto;
  transition: all 0.4s ease;
}
.parent p:hover p:after {
  width: 2em;
}

Answer 1

如果我对你的结构的理解正确，你正试图将 parent [=48= 中任何 <p> 标签的 :after 的 :hover 作为目标].

为此，您只需将两个 pseudo-selectors 合并为一个：
.parent p:hover:after.

将目标任何 <p> child of .parent。如果你想定位任何 <p> 标签，它是 .parent class 的 direct child，你可以使用大于符号 (>) 为 .parent > p:hover:after.

我在目标选择器中添加了一些 content 来帮助说明这一点。

.parent > p:hover:after {
  width: 2em;
  content: " - Hi there";
}

<div class="parent">
  <p>Menu Option A</p>
  <p>Menu Option B</p>
</div>
<p>Doesn't get the :after effect</p>

希望对您有所帮助！ :)

Answer 2

Combine :after with :hover 这会起作用：

.parent p:hover:after {
    width: 2em;
}

Answer 3

如果我没理解错的话 - 它与你悬停的 p 相同。

所以。是 .parent p:hover p:after 出错了。

:hover 和 :after 应该相互附加

像这样：

 .parent p:hover:after {
   width: 2em;
 }

:hover 对 p:after 的影响 div

:hover effect on p:after in specific div

html

css

selector