Come cambiare stile principale da bambino: hover azione in meno

Question

Ho questa messa a punto MENO:

.wrapper { 
    .parent { 
     height: 100px; 

     .children { 
      //some style; 

      &:hover { 

       .parent & { 
       height: 150px; 
       } 
      } 
     } 
    } 
} 

Ho bisogno di cambiare un po 'di altezza per elemento genitore da hover su alcuni bambini all'interno di esso. Questo codice non funziona, quindi è possibile farlo? Molto grazie per l'aiuto.

Answer 1

Aggiunta del :hover alla .parent al posto del .children div raggiungerà il risultato, http://codepen.io/duncanbeattie/pen/xvDdu

.wrapper { 
    .parent { 
     pointer-events:none; 
     height: 100px; 
     background:#000; 
     .children { 
      //some style; 
      height:20px; 
      background:#f00; 
      pointer-events:all; 
     } 
     &:hover { 
      height:150px; 
     } 
    } 
} 

Answer 2

Il problema principale è che purtroppo non è possibile lo stile del genitore in alcun modo dal punto di vista di un selettore per bambini (con o senza :hover) in CSS. Vedi questo answer here.

È possibile impostare lo stile dei bambini solo in base ai selettori o ai fratelli dei genitori in base ai selettori di ciascun altro.

Detto questo, ci sono naturalmente semplici modi per ottenere questo con JavaScript/jQuery,

ma non in meno, poiché la sua uscita è CSS, quindi le limitazioni di cui sopra si applicano ancora.

Ma Ma fortunatamente alcune proprietà dei bambini influenzano alcune proprietà dei loro genitori ... quindi, per lo stile dei bambini, si influirà anche sul genitore. Se il bambino (blocco) è posizionato relativamente all'interno di un genitore (blocco), i genitori height devono adattarsi allo height (incluso padding, margin e) del bambino, senza che tu debba fare qualcosa di veramente speciale per il genitore.

DEMO

.parent { 
 
    width:200px; 
 
    background:orange; 
 
} 
 
.child { 
 
    background:red; 
 
    width:100px; 
 
    height:100px; 
 
} 
 
.child:hover { 
 
    height:200px; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

Answer 3

Fai il tuo CSS in questo modo:

.parent.over { 
    /* whatever style you want when teh child is hovered over */ 
} 

utilizzando jQuery:

$(".children").hover(
    function() { 
     $(this).closest(".parent").removeClass("over").addClass("over"); 
    }, function() { 
     $(this).closest(".parent").removeClass("over"); 
    } 
);