使用SASS / BEM /祖父母/父母/子女/选择器/：hover

Question

我遇到了挑战，距离完成项目还有几小时的路程，这让我感到非常沮丧。

过去，我通过将段落分为两段并在其间插入一个切换来完成一个简单的段落折叠。

<p id="paragraph1">some text goes here </p>
<p id="toggleMe">more...</p>
<p id="paragraph2">more hidden text shows up here</p>

在CSS中：

#paraphgraph2{
display: none;

#togglMe:hover #paragraph2{
display: block;
}

但是显然我做错了，因为它不影响浏览器。

Answer 1

这是您拥有的：

#paraphgraph2{
display: none;

#togglMe:hover #paragraph2{
display: block;
}

<p id="paragraph1">some text goes here </p>
<p id="toggleMe">more...</p>
<p id="paragraph2">more hidden text shows up here</p>

请尝试以下操作：

#paragraph2{ /* Wrong id selector */
  display: none;
}/* Add closing bracket  */

#toggleMe:hover #paragraph2{ /* Wrong id selector */
  display: block;
}

<p id="paragraph1">some text goes here </p>
<div id="toggleMe">
  more...
  
  <p id="paragraph2">more hidden text shows up here</p>
</div>

#toggleMe:hover #paragraph2{建议#paragraph2位于#toggleMe内部。