html - 使用 SASS/BEM/Grandparent/parent/child/selector/: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 内。