html - CSS 不透明度属性在 Chrome 上不起作用

Question

它适用于 Firefox，但不适用于 Chrome。我想要做的是，当将鼠标悬停在卡片上时，卡片会应用不透明度属性。

HTML 文件:

<div class="col mb-4">
        <a class="textoc"href="user/terapeuticos">
          <div class="card carta">
          
            <img src="../../../assets/imagenes/Fondo1.jpg" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title subtitulo2 text-center rounded">Masajes terapéuticos</h5>
              <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            </div>
          </div>

        </a>
        
</div>

CSS 文件:

.textoc:link
{
  
  opacity: 1!important;
  text-decoration: none;
  color:black;
  background-color: rgba(255, 255, 255, 1);
  
}

.textoc:hover
{
  opacity: 0.5!important;
  background-color: rgba(255, 255, 255, 0.5);
  
}

.textoc:visited
{
  color: black;
  
}

.carta
{
  border-style: solid;
  border-color: #F3329F;
  border-width: 2px;
  
}

.subtitulo2
{
  
  color:#F3329F;
  border-style: solid;
  border-color: #F3329F;
  border-width: 1px;
}

我试图通过添加 background-color: rgba(255, 255, 255, 0.5); 来解决它，但没有任何改变。

Pd:我正在使用 Boostrap 4 框架。

Answer 1

我想我明白问题出在哪里了。无需更改 a(.textoc) 的不透明度，您需要更改作为该 a 子级的 img 的不透明度。

.textoc img:hover{
 opacity: 0.5;
 background-color: rgba(255, 255, 255, 0.5)}