CSS: passa il mouse su tutte le div child

Question

Ho un div genitore e div più figli all'interno. Lo voglio in modo che se passi il mouse sopra il div del genitore, questo influisce sullo stato di hover di tutti i div del thechild in modi separati (cioè il testo di un div viene sottolineato, il testo di un altro cambia colore e il div che tiene l'immagine rende l'immagine un po 'più chiara - solo per esempio). Come puoi implementarlo?

Ecco il codice Attualmente sto usando:

<div id='main_categories_item'> 
    <div id='main_categories_item_image'> 
    <img src='http://www.ultimate-punch.com/images/small_icon/ironman.jpg'> 
    </div> 

    <div id='main_categories_item_text_container'> 
     <div id='main_categories_item_category'>culture review</div> 
     <div id='main_categories_item_short_subtitle'>Our critique of the latest Iron Man installment</div> 
     <div id='main_categories_item_date'>2nd April 2013</div> 
    </div> 
</div> 

In questo vorrei #main_categories_item_category cambiare sottolineatura, #main_categories_item_short_subtitle a cambiare colore e #main_categories_item_image di cambiare l'opacità.

Ecco il CSS che ho finora:

#main_categories_item { 
    height: 100%; 
    width: 100%; 
    background-color: #f4f4f4; 
    border-bottom: 1px solid #fff; 
    padding: 10px; 
    overflow:auto; 
} 
#main_categories_item_image { 
    float: left; 
    margin-right: 10px; 
} 
#main_categories_item_image img { 
    width: 64px; 
    height: 64px; 
} 
#main_categories_item_text_container{ 
    float: right; 
    width: 146px; 
    height: 64px; 
} 
#main_categories_item_category { 
    font-family: Trebuchet MS; 
    font-size: 14px; 
    text-transform: uppercase; 
    color: #991111; 
    height:17px; 
} 
#main_categories_item_short_subtitle { 
    font-family: Trebuchet MS; 
    font-size: 12px; 
    color: #171717; 
    height: 36px; 
} 
#main_categories_item_date { 
    font-family: Trebuchet MS; 
    font-size: 10px; 
    color: #575757; 
} 

Grazie!

Answer 1

#main_categories_item_text_container:hover 
#main_categories_item_category { 
    text-decoration : underline; 
} 

#main_categories_item_text_container:hover 
#main_categories_item_short_subtitle { 
    color : blue; 
} 

#main_categories_item_text_container:hover 
#main_categories_item_image { 
    opacity : 0.5; 
} 

che dovrebbe funzionare

Answer 2

si può solo farlo come:

#parent:hover .child:hover { 
    color:red; 
} 

che renderebbe rosso .child al passaggio del mouse, quando in bilico #parent.

Answer 3

Piuttosto che interessano il bambino per classe, influenzano il bambino per tipologia:

.parentClass div { 
    height: 100%; 
} 

Questo codice avrà effetto su tutti div 's all'interno della classe parent. Usando questo concetto, avrai bisogno di un qualche tipo di variabile per distinguere tra le tre div. Ad esempio, se hai div A - div C e solo div B ha un'immagine al suo interno, l'esecuzione del seguente codice influirebbe ovviamente solo sull'immagine in div B.

.parentClass div img { 
    /* make lighter */ 
} 

Parto dal presupposto che si dovrebbe essere in grado di gettare un atleast id in là per differenziare, anche se questi div 's sono stati creati in modo dinamico, sia lato client o server-side. Se questo è il caso, che è lo scenario peggiore, ci sono ancora modi per assegnare dinamicamente lo id. Se hai assegnato un id, il seguente codice funzionerebbe

.parentClass #div1 { 
    height: 10px; 
} 
.parentClass #div2 { 
    height: 20px; 
} 
.parentClass #div2 img { 
    /* make lighter */ 
} 
.parentClass #div3 { 
    height: 30px; 
} 

<div id="div2"> 
    <img src="images/example.png"/> 
</div> 

Speranza che aiuta :)