CSS减轻父鼠标悬停的子元素-前端问题

CSS lighten child elements on parent mouseover(CSS减轻父鼠标悬停的子元素)

本文介绍了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 */
}

这篇关于CSS减轻父鼠标悬停的子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！