Question

想知道，当我们将鼠标悬停在某个特定div类上时，是否可以更改该特定div类和其他div类的不透明度？如果是这样，我该怎么办？任何意见将不胜感激。谢谢。

Answer 1

我想这就是你的追求！

    div {
      height: 50px;  
    }
    
    .divOne {
      background-color: purple;
    }
    
    .divOne:hover{
      opacity: 0.7;
    }
    
    .divTwo {
      background-color: green;
    }
    
    .divTwo:hover{
      opacity: 0.5;
    }

    <div class="divOne">
    
    </div>
    <div class="divTwo">
    
    </div>
    <div class="divOne">
    
    </div>

请参阅有效的JSFiddle：https://jsfiddle.net/19r6nvz7/1/

这里有一些资源可用于进一步研究：

：悬停-https://www.w3schools.com/cssref/sel_hover.asp
不透明-https://www.w3schools.com/css/css_image_transparency.asp

Answer 2

有两种类型的悬停不透明度。一种是div不透明度，另一种是背景不透明度。 1：对于div不透明度，它也会影响内容的可见性如下：

 #div1:hover{
       opacity:0.5;
    }

2：对于div背景不透明度，它仅对背景有效，我们可以为此使用RGBA。如下：

#div1:hover{
       background:rgba(0,0,0,.5);
    }

Answer 3

您可以尝试一下。

.first{
  background-color:red;
  height:500px;
}
.second{
  background-color:green
}
.third{
  background-color:tomato
}
.first:hover{
  opacity : 0.7
}
.second:hover{
      opacity: 0.7;
    }
.third:hover{
      opacity: 0.3;
    }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row">
  <div class="col-sm-4 first"></div>
  <div class="col-sm-4 second"> </div>
  <div class="col-sm-4 third"></div>
</div>

将鼠标悬停在不透明度上

3 个答案: