Selezione dell'elemento solo al passaggio del mouse per elementi nidificati immediatamente

Question

Ho una raccolta di commenti nidificati. Il mio obiettivo è visualizzare un'opzione di 'risposta' quando si passa il mouse su ciascun commento separatamente. Ciò significa che non voglio che l'opzione "rispondi" venga visualizzata per genitore/fratello/figlio del commento che sto passando.

L'unica domanda simile che ho trovato è: Can I control CSS selection for :hover on nested elements? Non sono nemmeno sicuro che i suoi bisogni siano gli stessi, e inoltre i violini non sembrano funzionare.

Ho preparato un fiddle quindi è meglio vedere quello che voglio dire:

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

Si noti che usando > nel selettore fa lavoro di ignorare gli elementi di pari livello, ma seleziona ancora il genitore elementi. In altre parole, a prescindere dal commento che si sta guardando, il genitore di tutti mostrerà sempre l'opzione "rispondi".

Questo può essere fatto solo con i CSS? Sono aperto alle soluzioni js, ma sarei più che felice se esistesse una soluzione solo CSS.

Answer 1

La soluzione migliore sarebbe quella di cambiare la marcatura un po 'e aggiungere un avvolgitore:

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

Con l'aggiunta di un wrapper div per il contenuto, è possibile destinare commenti singolarmente utilizzando .content:hover > .reply

Esempio:

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

Il wrapper del contenuto si espanderebbe nell'area del contenuto effettivo del commento (che ha più senso).

Tuttavia, è possibile anche espandere il wrapper sull'intero blocco di commenti (oltre al contenuto del commento) utilizzando gli stili di posizionamento. Ad esempio:

/* 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; 
} 

Dipende solo dal comportamento desiderato.

(jsFiddle example)

Answer 2

senza cambiare la marcatura, invece in bilico il genitore .comment, è possibile passa il fratello adiacente (usando +) .text (perché sempre lì)

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