CSS减轻父鼠标悬停上的子元素 [英] CSS lighten child elements on parent mouseover

问题描述

这里是我的问题。

我有一个 div ，其中包含另外两个 div

我想要减轻（改变alpha级别，或欢迎其他方法） ，当用户将鼠标指向父 div 时。两个孩子 divs 的颜色应该更改并变得稍微更轻。如果可能，我想避免使用javascript。

如何在CSS中执行此操作？

解决方案

像这样吗？

现场演示

相关CSS ：

  #container：hover .inner {
 opacity：0.8 
} 
  

HTML ：

 < div id =容器> 
< div id =leftclass =inner>< / div> 
< div id =rightclass =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; / *旧浏览器* / 
 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）色停（51％，＃fd89d7），停色（100％，＃ff7cd8））; / * webkit * / 
 
 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃fcecfc'，endColorstr ='＃ff7cd8'，GradientType = 0）; / * ie * / 
} 
  

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

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.

How to do this in CSS?

解决方案

Like this?

Live Demo

Relevant CSS:

#container:hover .inner {
    opacity: 0.8
}

HTML:

<div id="container">
    <div id="left" class="inner"></div>
    <div id="right" class="inner"></div>
</div>

Irrelevant CSS:

#container {
    width: 300px;
    padding: 30px;
    overflow: hidden
}

.inner {
    width: 40%;
    height: 250px;
    background: #ccc
}
#left {
    float: left
}
#right {
    float: right
}

Truly Irrelevant 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减轻父鼠标悬停上的子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！