这是我的问题。
我有一个包含另外两个 div
的 div
:基本上一个用于标题,一个用于内容。
当用户将鼠标指向父 div
时,我想变亮(更改 alpha 级别,或欢迎使用其他方法)。两个子 div
的颜色应该改变并变得稍微亮一些。如果可能,我想避免使用 javascript。
如何在 CSS 中做到这一点?
最佳答案
像这样?
相关 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 */
}
关于html - CSS 在父鼠标悬停时减轻子元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5199154/