Zaznaczanie tylko natychmiast osnujonego elementu w CSS dla elementów zagnieżdżonych

Question

Mam kolekcję zagnieżdżonych komentarzy. Moim celem jest wyświetlenie opcji "odpowiedz" po umieszczeniu każdego komentarza osobno. Oznacza to, że nie chcę, aby opcja "odpowiedź" pojawiała się dla nadrzędnego/siostrzanego/dzieci komentarza, nad którym zawieszam.

Jedyne podobne pytanie, które znalazłem to: Can I control CSS selection for :hover on nested elements? Nie jestem nawet pewien, czy jego potrzeby są takie same, a ponadto, że skrzypce nie działają.

Przygotowałem fiddle więc lepiej zobaczyć, co mam na myśli:

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

Zauważ, że używając > w selektor działa ignorowania elementy rodzeństwo, ale nadal wybiera rodzica elementy. Innymi słowy, bez względu na to, który komentarz zostanie najechany, rodzic z nich wszystkich zawsze pokaże opcję "odpowiedź".

Czy można to zrobić tylko przy użyciu CSS? Jestem otwarty na rozwiązania js, ale byłbym bardziej niż szczęśliwy, gdyby istniało tylko rozwiązanie CSS.

Answer 1

Najlepszym rozwiązaniem byłaby zmiana znaczników trochę i dodać otoki:

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

Dodając div opakowanie za treści można kierować komentarze indywidualnie za pomocą .content:hover > .reply

Przykład:

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

Zawartość opakowania rozszerzy się do obszaru rzeczywistej treści komentarza (co jest najbardziej sensowne).

Można jednak również rozszerzyć opakowanie do całego bloku komentarza (więcej niż treść komentarza) za pomocą stylów pozycjonowania. Na przykład:

/* OPTIONAL - These style changes make the content 
* wrapper cover the entire comment block. 
*/ 
.comment { 
    padding: 10px; 
    border: 1px solid black; 
    margin-top: 10px; 
    position:relative; 
} 

.comment .content { 
    width:100%; 
    height:100%; 
    position:absolute; 
    top:0; 
    left:0; 
} 

To zależy od pożądanego zachowania.

(jsFiddle example)

Answer 2

bez zmieniając znaczników, zamiast unosić rodzica .comment można unosić przylegającą rodzeństwo (używając +) .text (bo zawsze tam być)

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