CSS在父元素鼠标悬停时使子元素变亮

Question

这是我的问题。
我有一个div，其中包含另外两个div：一个用于标题，一个用于内容。

当用户将鼠标指向父div时，我想要使其变得减轻（更改透明度或其他方法都可以），并且两个子divs的颜色应该改变并变得稍微亮一些。我想尽可能避免使用javascript来实现。

如何在CSS中实现这个效果？

- ZolaKt

Answer 1

这样做？

在线演示

相关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 */
}

- thirtydot

---

顺便问一下，我怎么只改变背景颜色的不透明度，而不影响文本颜色？ - ZolaKt

@ZolaKt：使用rgba背景：http://jsfiddle.net/thirtydot/NHbn8/1/ - 请参考此处了解如何跨浏览器实现。 - thirtydot

@ZolaKt：http://jsfiddle.net/thirtydot/NHbn8/2/？编辑：你删除了上一个评论，所以我猜你自己解决了。 - thirtydot

@OmerAhmed：当然可以。它已经在IE9+中运行，并且可以通过最小的努力使其在IE7-8中运行。 - thirtydot

如此简单.. 如此优雅！ :) - ufk

Answer 2

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

- Brandon Frohbieter

---

这段代码实现了这个功能。（其中div1和div2是子元素，div是父元素） :) - Brandon Frohbieter

Answer 3

您可以使用 #div:hover，也许？

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

- Demelziraptor