web-dev-qa-db-fra.com

CSS alléger les éléments enfants au survol du parent

voici mon problème.
J'ai un div qui contient deux autres divs: essentiellement un pour l'en-tête, un pour le contenu.

Je voudrais alléger (changer le niveau alpha, ou une autre méthode est la bienvenue), lorsque l'utilisateur pointe la souris sur le parent div. Les couleurs des deux enfants divs devraient changer et devenir légèrement plus claires. J'aimerais éviter le javascript si possible.

Comment faire cela en CSS?

htmlcsscss3hovertransparency
31
ZolaKt

Comme ça?

Démo en direct

CSS pertinent: 

#container:hover .inner {
    opacity: 0.8
}

HTML: 

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

CSS non pertinent: 

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

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

CSS vraiment non pertinent: 

#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 */
}
68
thirtydot
  #div:hover #div1{
     color:#lightercolor;
  }
  #div:hover #div2{
     color:#lightercolor;
  }
21
Orbit

Vous pouvez utiliser #div: hover, peut-être?

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