父元素悬停时Div自身透明、内容不透明的实现问题求助

哦，我明白你的问题了——你想用opacity实现父元素悬停时目标div的背景透明，但它会把里面的文字也跟着弄透明，这确实是个常见的坑！

问题根源 #

opacity 属性会作用于整个元素以及它的所有子元素，所以你设置 .changer 的opacity时，里面的文字也会继承这个透明度，没办法单独让文字保持不透明。

解决方案：用rgba控制背景色透明度 #

我们可以把 opacity 替换为 background-color 的rgba值，这样只有背景色会有透明度，div内的内容完全不受影响：

.changer{ 
  /* 初始背景完全透明，rgba第四个参数是透明度（0-1） */
  background-color: rgba(128, 128, 128, 0); 
  display: block;
  transition: .5s ease;
  backface-visibility: hidden; 
} 

.mb-4:hover .changer{ 
  /* 悬停时背景变为60%不透明的灰色 */
  background-color: rgba(128, 128, 128, 0.6); 
}

为什么这样可行？ #

rgba颜色的第四个值专门用来控制该颜色的透明度，它只会影响背景色本身，不会传递给子元素。这样你的文字就能保持完全不透明，同时背景的透明效果和过渡动画都能正常工作。

内容的提问来源于stack exchange，提问作者Sth