使 div 项目透明，悬停时内容不透明

Question

我有一个 <div id='a'> 当悬停在其父元素上时它会变得透明。但是 div 的内容应该是不透明的。代码如下：

.changer{        
    background-color: gray;
    opacity:0;
    display: block;
    transition: .5s ease;
    backface-visibility: hidden;
}

.mb-4:hover .changer{
    opacity: 0.6;
}

<a href="#" class="d-block mb-4">
    <div id="a" class="changer d-inline">The text that must be non-transparent</div>
    <img class="img-fluid img-thumbnail" src="images/barcelona.jpg" alt="">  <!--this element is not very important-->
</a>

Answer 1

使用背景色来做到这一点比方说，如果你想让 div 半透明并且背景是白色的，那么你需要以下代码：

background: rgba(255,255,255,0.6);

这里需要使用rgb值，最后一个0.6值是不透明度，(255,255,255)是白色的颜色代码，你可以通过更改值来制作任何颜色。

删除背景颜色和不透明度属性

Answer 2

使用 CSS3 的背景不透明度来更改 div/img/whatever 背景的可见度，而不影响其中的内容。

.inner {
  color: black;
  background: rgba(128, 0, 128, 0.25);
  transition: .5s ease;
  height: 3em;
}

.outer:hover .inner {
  background: rgba(128, 0, 128, 0.75);
  height: 4em;
}

.outer .inner div {
  width: 10em;
  height: 2em;
  background: gray;
}

a,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}

<a href="#" class="outer">
  <div class="inner">
    <div>Hover over me</div>
  </div>
</a>

编辑

修改片段以证明内部 div 完全不受外部 div 的更改影响。

编辑 2

也要更改文本的透明度：

.inner {
  background: rgba(128, 128, 128, 0);
  color: rgba(0, 0, 0, 0);
  transition: .5s ease;
}

.outer:hover .inner {
  background: rgba(128, 128, 128, 1);
  color: rgba(0, 0, 0, 1);
  /* alternative: change the text color itself instead of changing opacity */
}

a,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}

<a href="#" class="outer">
  <div class="inner">Hover over me</div>
</a>

使 div 项目透明，悬停时内容不透明

Make the div item transparent, with non-transparent content WHEN hovering

html

css

hover

opacity