CSS减轻父鼠标悬停的子元素

2022-01-22 00:00:00 transparency hover html css

这是我的问题.
我有一个 div，其中包含另外两个 div:基本上一个用于标题，一个用于内容.

here is my problem.
I have a div which contains two other divs: basically one for header, one for content.

当用户将鼠标指向父 div 时，我想点亮(更改 alpha 级别，或欢迎使用其他方法).两个子 divs 的颜色应该会改变并变得稍微浅一些.如果可能，我想避免使用 javascript.

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 divs should change and become slightly lighter. I'd like to avoid javascript if possible.

如何在 CSS 中做到这一点?

How to do this in 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 */
}

相关文章