html – 在子悬停时,为容器添加背景颜色

概述当光标悬停在左侧div时,我需要重叠整个包装器,左侧div除外,黑色,不透明度为0.2. 我怎么能在CSS中做到这一点？谢谢. <div id="wrapper"> <div id="left">... some elements</div> <div id="right">... some elements</div></div> 您可以使用通用兄弟组合子(〜)和具有绝对位置的div来 当光标悬停在左侧div时,我需要重叠整个包装器,左侧div除外,黑色,不透明度为0.2.

我怎么能在CSS中做到这一点？谢谢.

<div ID="wrapper">  <div ID="left">... some elements</div>  <div ID="right">... some elements</div></div>

解决方法 您可以使用通用兄弟组合子(〜)和具有绝对位置的div来获得此效果.在该示例中,您将选择具有“.bgr”类的div,该类位于悬停的孩子之后并使其成为粉红色/蓝色.

#wraper {position:relative;wIDth:200px;height:200px;}.bgr {position:absolute;top:0;left:0;wIDth:100%;height:100%;background:#fff;padding:30px;}#left,#right {position:relative;z-index:1;wIDth:200px;height:100px;border:1px solID #333;margin:20px;}#left{background:#fff;}#right{background:#f1f1f1;}#left:hover {background:#f9f9f9;}#right:hover {background:#f9f9f9;}#left:hover ~ .bgr {background:blue;}#right:hover ~ .bgr {background:pink;}

<div ID="wrapper"><div ID="left"> ... some elements </div><div ID="right"> ... some elements </div><div ></div></div>

总结

以上是内存溢出为你收集整理的html – 在子悬停时,为容器添加背景颜色全部内容，希望文章能够帮你解决html – 在子悬停时,为容器添加背景颜色所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。