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

Posted 2023-03-06

【中文标题】CSS减轻父鼠标悬停的子元素

【英文标题】：CSS lighten child elements on parent mouseover

【发布时间】：2011-07-09 02:54:53

【问题描述】：

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

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

如何在 CSS 中做到这一点？

【参考方案1】：

  #div:hover #div1
     color:#lightercolor;
  
  #div:hover #div2
     color:#lightercolor;
  

【讨论】：

这段代码就是这样做的。 （div1 和 div2 是孩子，div 是父母）:)

哦，没问题，希望对您有所帮助，如果有效，请随时接受 :)

【参考方案2】：

也许你可以使用#div:hover？

#parent_div:hover #child_div_1  background-color: #333; 
#parent_div:hover #child_div_2  background-color: #666; 

【参考方案3】：

像这样？

Live Demo

相关 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 */

【讨论】：

顺便说一句。如何仅更改背景颜色的不透明度，使其不影响文本颜色？

@ZolaKt：使用rgba 背景：http://jsfiddle.net/thirtydot/NHbn8/1/ - see here 了解如何跨浏览器进行操作。

@ZolaKt: jsfiddle.net/thirtydot/NHbn8/2 ?编辑：你删除了最后一条评论，所以我猜你自己想通了。

@OmerAhmed：当然会。它已经在 IE9+ 中运行，并且可以轻松地在 IE7-8 中运行。

如此简单..如此优雅！ :)