当我试图将悬停在图像上时的文本不透明度更改为1时，我遇到了一个问题。文本的初始不透明度值为0。所以当我悬停在profile_picture图像上时，文本不透明度应该是1，但问题是它不会改变文本不透明度。
<div class="account_image">
<img src="img/profile_p.jpg" class="profile_picture">
<div class="t_overlay">
<div class="change_c">CHANGE</div>
<div class="avatar_a">AVI</div>
</div>
</div>
.account_image{
margin-top: 5px;
margin-bottom: 5px;
}
.profile_picture{
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 50%;
margin-left: 65px;
filter: brightness(100%);
cursor: pointer;
}
.t_overlay{
position: absolute;
margin-left: 73px;
margin-top: -43px;
font-size: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
line-height: 1.2;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
cursor: pointer;
opacity: 0; //initial opacity 0
color: white;
font-family: 'Quicksand', sans-serif;
pointer-events: none;
}
.profile_picture:hover{
filter: brightness(70%);
transition: filter 0.25s ease;
}
.profile_picture:hover .t_overlay{
opacity: 1; //when hovered, text opacity of t_overlay should change to 1
}
问题是您的css选择器.profile_picture:Hover.T_Overlay应该是.profile_picture:Hover+.T_Overlay或.profile_picture:Hover~.T_Overlay
您编写的选择器选择profile_picture的子级，但您需要同级级
参见https://developer.mozilla.org/en-us/docs/web/css/accastent_sibling_combinator和https://developer.mozilla.org/en-us/docs/web/css/general_sibling_combinator
我知道这个问题。你不能只是悬停和激活一个类，这是一个兄弟。为此需要一个选择器属性。类似+
下面给大家摆弄一下固定版:
.account_image{
margin-top: 5px;
margin-bottom: 5px;
}
.profile_picture{
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 50%;
margin-left: 65px;
filter: brightness(100%);
cursor: pointer;
position: relative;
z-index: 1;
}
.t_overlay{
position: absolute;
margin-left: 73px;
margin-top: -43px;
font-size: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
line-height: 1.2;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
cursor: pointer;
opacity: 0;
color: white;
font-family: 'Quicksand', sans-serif;
pointer-events: none;
z-index: 2;
}
.profile_picture:hover{
filter: brightness(70%);
transition: filter 0.25s ease;
}
.profile_picture:hover + .t_overlay{
opacity: 1;
}<div class="account_image">
<img src="https://source.unsplash.com/random" class="profile_picture">
<div class="t_overlay">
<div class="change_c">CHANGE</div>
<div class="avatar_a">AVI</div>
</div>
</div>
您的选择器.profile_picture:hover.t_overlay不正确，因为覆盖是图像的同级而不是子级。只需在两者之间添加一个+运算符，如:
.profile_picture:hover + .t_overlay {
演示:
null
.account_image{
margin-top: 5px;
margin-bottom: 5px;
}
.profile_picture{
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 50%;
margin-left: 65px;
filter: brightness(100%);
cursor: pointer;
}
.t_overlay{
position: absolute;
margin-left: 73px;
margin-top: -43px;
font-size: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
line-height: 1.2;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
cursor: pointer;
opacity: 0;
color: white;
font-family: 'Quicksand', sans-serif;
pointer-events: none;
}
.profile_picture:hover{
filter: brightness(70%);
transition: filter 0.25s ease;
}
.profile_picture:hover + .t_overlay{
opacity: 1;
}<div class="account_image">
<img src="https://via.placeholder.com/150" class="profile_picture">
<div class="t_overlay">
<div class="change_c">CHANGE</div>
<div class="avatar_a">AVI</div>
</div>
</div>