Использование SASS / BEM / Grandparent / parent / child / selector /: hover

Question

У меня есть проблема, и я нахожусь в нескольких часах от сдачи проекта и полностью разочарован.

В прошлом я делал простой свертывание абзаца, разделив абзац на 2 части ивставка переключателя между ними.

<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.