Выбор только сразу зависшего элемента в CSS для вложенных элементов

У меня есть набор вложенных комментариев. Моя цель состоит в том, чтобы отображать параметр "ответ" при наведении каждого комментария отдельно. Это означает, что я не хочу, чтобы опция "reply" отображалась для parent/sibling/children комментария, который я наводил.

Единственный похожий вопрос, который я нашел: Могу ли я контролировать выбор CSS для: наведения на вложенные элементы? Я даже не уверен, что его потребности одинаковы, и кроме того, скрипты, похоже, не работают.

Я подготовил fiddle, чтобы лучше понять, что я имею в виду:

.comment {
  padding: 10px;
  border: 1px solid black;
  margin-top: 10px;
}
.text {} .comment:hover > .reply {
  display: inline-block;
}
.reply {
  display: none;
}
.children-comments {
  margin-left: 50px;
  margin-top: 10px;
}
<div class="comment">
  <a class="text">wohoo</a>
  <a class="reply">reply</a>
  <div class="children-comments">
    <div class="comment">
      <a class="text">wohoo</a>
      <a class="reply">reply</a>
      <div class="children-comments">

      </div>
    </div>
    <div class="comment">
      <a class="text">wohoo</a>
      <a class="reply">reply</a>
      <div class="children-comments">
        <div class="comment">
          <a class="text">wohoo</a>
          <a class="reply">reply</a>
          <div class="children-comments">
            <div class="comment">
              <a class="text">wohoo</a>
              <a class="reply">reply</a>
              <div class="children-comments">

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="comment">
      <a class="text">wohoo</a>
      <a class="reply">reply</a>
      <div class="children-comments">

      </div>
    </div>
  </div>
</div>

Ответы

Ответ 1

Ваш лучший вариант - немного изменить разметку и добавить обертку:

<div class="comment">
  <div class="content">   <!-- Here -->
    <a class="text">wohoo</a>
    <a class="reply">reply</a>
  </div>

Добавляя обертку div для контента, вы можете настраивать индивидуальные цели с помощью .content:hover > .reply

Пример:

.comment {
  padding: 10px;
  border: 1px solid black;
  margin-top: 10px;
}

.text {}

.content:hover > .reply {
  display: inline-block;
}

.reply {
  display: none;
}

.children-comments {
  margin-left: 50px;
  margin-top: 10px;
}
<div class="comment">
  <div class="content">
    <a class="text">wohoo</a>
    <a class="reply">reply</a>
  </div>
  <div class="children-comments">
    <div class="comment">
      <div class="content">
        <a class="text">wohoo</a>
        <a class="reply">reply</a>
      </div>
      <div class="children-comments">
        <div class="comment">
          <div class="content">
            <a class="text">wohoo</a>
            <a class="reply">reply</a>
          </div>
        </div>
        <div class="children-comments">
          <div class="comment">
            <div class="content">
              <a class="text">wohoo</a>
              <a class="reply">reply</a>
            </div>
            <div class="children-comments">
              <div class="comment">
                <div class="content">
                  <a class="text">wohoo</a>
                  <a class="reply">reply</a>
                </div>
                <div class="children-comments">

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="comment">
        <div class="content">

          <a class="text">wohoo</a>
          <a class="reply">reply</a>
          <div class="children-comments">
          </div>
        </div>
      </div>
    </div>
  </div>

Ответ 2

без, изменяя вашу разметку, вместо того, чтобы парить родительский .comment, вы можете навешивать соседнего брата (используя +) .text (потому что он всегда там)

.comment {
  padding: 10px;
  border: 1px solid black;
  margin-top: 10px;
}
.text {
  display:inline-block
}
.text:hover + .reply {
  display: inline-block;
}
.reply {
  display: none;
}
.children-comments {
  margin-left: 50px;
  margin-top: 10px;
}
<div class="comment">
  <a class="text"> wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo </a>
  <a class="reply">reply</a>
  <div class="children-comments">
    <div class="comment">
      <a class="text">wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo </a>
      <a class="reply">reply</a>
      <div class="children-comments">

      </div>
    </div>
    <div class="comment">
      <a class="text">wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo </a>
      <a class="reply">reply</a>
      <div class="children-comments">
        <div class="comment">
          <a class="text"> wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo </a>
          <a class="reply">reply</a>
          <div class="children-comments">
            <div class="comment">
              <a class="text"> wohoo wohoo wohoo wohoo  </a>
              <a class="reply">reply</a>
              <div class="children-comments">

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="comment">
      <a class="text"> wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo  wohoo wohoo wohoo wohoo wohoo wohoo wohoo wohoo </a>
      <a class="reply">reply</a>
      <div class="children-comments">

      </div>
    </div>
  </div>
</div>