CSS erhellt untergeordnete Elemente bei Mouseover des Elternteils

Question

Hier ist mein Problem.
Ich habe eine div die zwei weitere divs Grundsätzlich eine für die Kopfzeile und eine für den Inhalt.

Ich würde gerne aufhellen (Änderung der Alphastufe oder eine andere Methode ist willkommen), wenn der Benutzer mit der Maus über die übergeordnete div . Farben von beiden Kind divs sollte sich verändern und etwas heller werden. Ich würde gerne Javascript vermeiden, wenn möglich.

Wie macht man das in CSS?

Answer 1

Etwa so?

Live-Demo

Einschlägige CSS:

#container:hover .inner {
    opacity: 0.8
}

HTML:

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

Irrelevantes CSS:

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

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

Wahrhaft irrelevantes CSS:

#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

Vielleicht können Sie #div:hover verwenden?

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