Question

我似乎无法正确激活父div中 p 元素的：悬停状态

对于父div中的所有 p 元素，有一个：after ，其宽度为0，以便在悬停时创建下划线。我希望宽度来自＆＃34; 0＆＃34;到＆＃34; 2em＆＃34;当 p 悬停时。

我不确定如何正确定位 p 以及：后悬停。

我虽然看起来像下面的内容。

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

如果我正确理解您的结构，您就会尝试定位:hover类中:after个<p>标记的parent。

要做到这一点，您只需要将两个伪选择器合并为一个：
.parent p:hover:after。

该目标会定位{strong> <p>的任何 .parent孩子。如果您要定位<p>类的直接子标记的任何.parent标记，则可以使用大于号（>）作为{{ 1}}。

我已在目标选择器中添加了一些.parent > p:hover:after来帮助说明这一点。

＆＃13;

content

＆＃13;

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

＆＃13;

希望这有帮助！：）

Answer 2

Combine :after with :hover 这会奏效：

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

Answer 3

如果我理解正确 - 你想要操纵它就像你一样。

因此。这是.parent p:hover p:after它的错误。

:hover和:after应相互追加

像这样：

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

：hover效果在p：在特定div之后

3 个答案: