悬停时更改图像的亮度

Question

<div class="account_image">
<img src="img/profile_p.jpg" class="profile_picture">
<div class="t_overlay">
CHANGE AVATAR
</div>
</div>
.profile_picture{
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 50%;
margin-left: 65px;
filter: brightness(100%);
cursor: pointer;
}
.profile_picture:hover{
filter: brightness(70%);
transition: filter 0.25s ease;
}
.t_overlay{
position: absolute;
margin-left: 76px;
margin-top: -43px;
font-size: 10px;
height: 0px;
width: 0px;
line-height: 1.2;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
cursor: pointer;
opacity: 1;
color: white;
}
.t_overlay:hover profile_picture{
filter: brightness(70%);
}

我有一个代码，如果你将鼠标悬停在个人资料图片上，它会将个人资料图片的亮度降低到70%"更改AVTAR文本位于配置文件图片的中间。如果我悬停在"；CHANGE AVTAR"；文本，个人资料图片的亮度再次增加到100%，但我希望它保持在70%。

Answer 1

请参阅下面更新的代码。运行代码段。

我只是添加了pointer-events: none;

至.t_overlay

以下是指针事件的文档。

.profile_picture{
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 50%;
margin-left: 65px;
filter: brightness(100%);
cursor: pointer;
}
.profile_picture:hover{
filter: brightness(70%);
transition: filter 0.25s ease;
}
.t_overlay{
position: absolute;
margin-left: 76px;
margin-top: -43px;
font-size: 10px;
height: 0px;
width: 0px;
line-height: 1.2;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
cursor: pointer;
opacity: 1;
color: white;
pointer-events: none;
}
.t_overlay:hover profile_picture{
filter: brightness(70%);
}

<div class="account_image">
<img src="https://cdn.pixabay.com/photo/2020/08/25/18/28/workplace-5517744__340.jpg" class="profile_picture">
<div class="t_overlay">
CHANGE AVATAR
</div>
</div>