CSS aligerar elementos secundarios en mouseover padre

Question

aquí está mi problema.
Tengo un div que contiene otros dos divs: básicamente uno para el encabezado, uno para el contenido.

me gustaría aligerar (nivel alfa cambio, o se da la bienvenida algún otro método), cuando el usuario apunta el puntero del ratón sobre el padre div. Los colores de ambos niños divs deben cambiar y ser ligeramente más claros. Me gustaría evitar javascript si es posible.

¿Cómo hacer esto en CSS?

Answer 1

¿Le gusta a esto?

Live Demo

CSS relevante:

#container:hover .inner { 
    opacity: 0.8 
} 

HTML:

<div id="container"> 
    <div id="left" class="inner"></div> 
    <div id="right" class="inner"></div> 
</div> 

CSS irrelevante:

#container { 
    width: 300px; 
    padding: 30px; 
    overflow: hidden 
} 

.inner { 
    width: 40%; 
    height: 250px; 
    background: #ccc 
} 
#left { 
    float: left 
} 
#right { 
    float: right 
} 

CSS verdaderamente irrelevante:

#container { 
    background: #fcecfc; /* old browsers */ 
    background: -moz-linear-gradient(top, #fcecfc 0%, #fba6e1 50%, #fd89d7 51%, #ff7cd8 100%); /* firefox */ 

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcecfc), color-stop(50%,#fba6e1), color-stop(51%,#fd89d7), color-stop(100%,#ff7cd8)); /* webkit */ 

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcecfc', endColorstr='#ff7cd8',GradientType=0); /* ie */ 
} 

Answer 2

#div:hover #div1{ 
    color:#lightercolor; 
    } 
    #div:hover #div2{ 
    color:#lightercolor; 
    } 

Answer 3

Puede usar #div: hover, quizás?

#parent_div:hover #child_div_1 { background-color: #333; } 
#parent_div:hover #child_div_2 { background-color: #666; }