web-dev-qa-db-ja.com

CSSは、親マウスオーバーで子要素を明るくします

ここに私の問題があります。
他に2つのdivを含むdivsがあります。基本的にはヘッダー用、コンテンツ用です。

ユーザーが親divの上にマウスを置いたときにlighten（アルファレベルの変更、または他の方法を歓迎します）にしたいと思います。両方の子divsの色が変更され、少し明るくなるはずです。可能であればjavascriptを避けたいです。

CSSでこれを行う方法は？

htmlcsscss3hovertransparency
31
ZolaKt

このような？

Live Demo

関連するCSS：

#container:hover .inner {
    opacity: 0.8
}

HTML：

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

無関係なCSS：

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

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

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

おそらく#div：hoverを使用できますか？

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