• Как правильно сверстать в этой ситуации?

    @xqdbpx
    Самый простой способ: Сделать некликабельной ту часть заголовка, которая отвечает за появление текста. Для этого можно использовать специальный трюк с CSS.
    Другой вариант: Разделить заголовок на две части: одна для текста, другая для кликабельной области. Это немного сложнее, но дает больше возможностей для дизайна.

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

    <div class="post">
      <div class="post__title">
        <span class="post__title-text">Заголовок поста</span>
      </div>
      <div class="post__text">Текст поста</div>
    </div>

    .post__text {
      display: none;
    }
    
    .post__title-text:hover + .post__text {
      display: block;
    }

    По идеи так должно пахать не тестил мож жпт спросить
    Ответ написан
    Комментировать