正文

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

 2023-03-06  118

关键词：

【中文标题】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 中运行。如此简单..如此优雅！ :)

根据悬停的子元素设置不同的父元素样式 | CSS

】根据悬停的子元素设置不同的父元素样式|CSS【英文标题】：Styleparentelementdifferentlydependingonwhichchildelementishovered|CSS【发布时间】：2021-03-0209:06:00【问题描述】：我正在部分使用解决方案来解决不久前提出的this问题。我说部分因... 查看详情

CSS：在悬停时减轻元素

】CSS：在悬停时减轻元素【英文标题】：CSS:lightenanelementonhover【发布时间】：2013-04-1704:49:16【问题描述】：假设一个元素处于100%的饱和度、不透明度等...我怎样才能让它的背景在悬停时稍微变亮？用例是我允许用户将鼠标悬停... 查看详情

通过 CSS 将鼠标悬停在父元素上时显示 :after

】通过CSS将鼠标悬停在父元素上时显示:after【英文标题】：Show:afterwhenhoveringovertheparentelementviaCSS【发布时间】：2013-03-0711:57:06【问题描述】：当我将鼠标悬停在父元素本身上时，是否可以display:block;:after伪元素？#myDivposition:relativ... 查看详情

在没有jQuery的情况下悬停父绝对div的子元素时防止onmouseout

...：我在使用绝对定位div中的onmouseout函数时遇到问题。当鼠标点击div中的子元素时，mouseout事件会触发，但我不希望它查看详情

您可以将 CSS 悬停效果应用于不是悬停元素的子元素的元素吗？

...不确定这是否可能。我现在正在使用CSS3动画，我需要将鼠标悬停在会影响页面上其他div元素（非子元素）的链接上。我不确定是否有解决方法。<stylet 查看详情

如何在鼠标位于下拉菜单的子菜单中时保持父菜单悬停

】如何在鼠标位于下拉菜单的子菜单中时保持父菜单悬停【英文标题】：HowtokeeptheParentmenuhoveredwhilethemouseisinchildmenuinaDropdownMenu【发布时间】：2011-05-1710:22:37【问题描述】：大家好，我想知道如何在子菜单中移动鼠标时保持父菜... 查看详情

如果父元素也有鼠标悬停，如何为子元素触发鼠标悬停事件？

】如果父元素也有鼠标悬停，如何为子元素触发鼠标悬停事件？【英文标题】：HowcanIhaveamouseovereventfireforachildelementiftheparentelementhasamouseovertoo?【发布时间】：2013-02-2200:28:42【问题描述】：我的页面上有一个“帮助”区域，只要用... 查看详情

CSS 效果 :hover::after 在子元素上 :hover 在父元素上

...parent【发布时间】：2021-09-2308:13:43【问题描述】：当我将鼠标悬停在div上时，我很难在div的文本上获得CSS悬停效果。当我将鼠标悬停在.card-aboutdiv上时，我希望.mark-heading标记文本通过:hover::afte 查看详情

jQuery：将鼠标悬停在其上时保持切换的子元素打开

】jQuery：将鼠标悬停在其上时保持切换的子元素打开【英文标题】：jQuery:keeptoggledchildelementopenwhenhoveringoverit【发布时间】：2011-05-0213:41:03【问题描述】：我的问题类似，但与jquery-hover-menu-when-hovering-over-child-menu-disappears不同。我... 查看详情

悬停父元素后的CSS悬停元素

】悬停父元素后的CSS悬停元素【英文标题】：CSShoverelementafterhoverparentelement【发布时间】：2018-05-0311:49:40【问题描述】：我有一个带有两个背景图像的分屏。在每一边我都有一个image.png和一个image-hover.png。当我将光标放在背景图... 查看详情

如何确定鼠标相对于父元素的悬停位置

】如何确定鼠标相对于父元素的悬停位置【英文标题】：Howtodeterminewherethemouseishoveringrelativetoaparentelement【发布时间】：2012-04-1922:13:52【问题描述】：我正在为支持拖放的树视图实现拖放。树中有文件夹和文件。当我拖过文件夹... 查看详情

鼠标悬停相关操作

css相关操作：常用场景：1.给盒子加阴影.operater-item:hover{box-shadow:03px7px0rgba(174,174,174,0.5);}2.悬停显示文字<divtitle="悬停显示的说明文字">悬停显示文字</div>3.悬停显示隐藏的子元素盒子即hover同样可以对子元素进行... 查看详情

CSS - 为啥不：悬停父隐藏子元素

】CSS-为啥不：悬停父隐藏子元素【英文标题】：CSS-whydoesn\'t:hoverparenthidechildelementsCSS-为什么不：悬停父隐藏子元素【发布时间】：2011-10-2917:06:31【问题描述】：我有一个带有图像的导航栏，如下所示：<ul><liclass="me"><s... 查看详情

当父元素悬停时更改子元素的 CSS

】当父元素悬停时更改子元素的CSS【英文标题】：Changingthechildelement\'sCSSwhentheparentishovered【发布时间】：2011-07-0100:31:42【问题描述】：首先，我假设这对于CSS3来说太复杂了，但如果那里有解决方案，我很乐意使用它。HTML非常简... 查看详情

Styled-Components：在父鼠标悬停时指定子元素的样式

】Styled-Components：在父鼠标悬停时指定子元素的样式【英文标题】：Styled-Components:specifystylesofchildrenonparentshover【发布时间】：2017-12-1514:59:16【问题描述】：我有一个简单的组件这是它的2个版本-带有和不带有样式组件：没有样式... 查看详情

css将鼠标悬停在子菜单项上时的样式父菜单项(代码片段)

查看详情

如何在父元素和子元素上设置 CSS 悬停效果

】如何在父元素和子元素上设置CSS悬停效果【英文标题】：HowtosetCSShovereffect,onparentandchildelements【发布时间】：2012-02-1403:45:18【问题描述】：假设我有以下代码：<divclass="wrapper"><divclass="title"></div><div></div><... 查看详情

将父元素悬停到子标签元素后如何更改相同的css样式？

】将父元素悬停到子标签元素后如何更改相同的css样式？【英文标题】：Howcantochangesamecssstyleafterhoverparenttochildtagelement?【发布时间】：2020-07-2516:46:11【问题描述】：下面是我的html代码段，<divclass="div-builder"><div><ahref="#... 查看详情