Html CSS 使父鼠标悬停时的子元素变亮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5199154/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS lighten child elements on parent mouseover
提问by ZolaKt
here is my problem.
I have a divwhich contains two other divs: basically one for header, one for content.
这是我的问题。
我有一个div包含另外两个divs：基本上一个用于标题，一个用于内容。
I'd like to lighten(change alpha level, or some other method is welcomed), when the user points the mouse over the parent div. Colors of both child divsshould change and become slightly lighter. I'd like to avoid javascript if possible.
当用户将鼠标指向 parent 时，我想变亮（更改 alpha 级别，或欢迎使用其他一些方法）div。两个孩子的颜色都divs应该改变并变得稍微浅一些。如果可能，我想避免使用 javascript。
How to do this in CSS?
如何在 CSS 中做到这一点？
回答by thirtydot
Like this?
像这样？
Relevant CSS:
相关CSS：
#container:hover .inner {
opacity: 0.8
}
HTML:
HTML：
<div id="container">
<div id="left" class="inner"></div>
<div id="right" class="inner"></div>
</div>
Irrelevant CSS:
不相关的 CSS：
#container {
width: 300px;
padding: 30px;
overflow: hidden
}
.inner {
width: 40%;
height: 250px;
background: #ccc
}
#left {
float: left
}
#right {
float: right
}
Truly Irrelevant CSS:
真正不相关的 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 */
}
回答by Orbit
#div:hover #div1{
color:#lightercolor;
}
#div:hover #div2{
color:#lightercolor;
}
回答by Demelziraptor
You can use #div:hover, perhaps?
你可以使用#div:hover，也许？
#parent_div:hover #child_div_1 { background-color: #333; }
#parent_div:hover #child_div_2 { background-color: #666; }
