如何使图像悬停在边框CSS上工作

Question

我设计了两个边界。一个在图像后面(黑色边框(，第二个在图像上(粉色边框(。图像悬停在粉红色边框外工作。但在里面不起作用。我怎么能让悬停在粉色边框内也起作用？

HTML:

<div class="img-border1">
<img src="https://assets.entrepreneur.com/content/3x2/2000/20191219170611-GettyImages-1152794789.jpeg" alt="">
</div>

CSS：

.img-border1{
position: relative;
border: 2px solid;
width: 20%;
height: 200px;
}

.img-border1 img{
position: absolute;
width: 300px;
height: 265px;
filter: grayscale(100%);
transition: .25s;
left: 15px;
top: 15px;

}
.img-border1 img:hover{
filter: none;
-webkit-filter: none;
}
.img-border1::after{
border: 4px solid orchid;
content: "";
display: block;
position: absolute;
top: 30px;
left: 30px;
right: -40px;
bottom: -40px;
}

视觉表示：Codepen

Answer 1

尝试将:hover设置为.img-border1，而不是img。

.img-border1 {
position: relative;
border: 2px solid;
width: 20%;
height: 200px;
}
.img-border1 img {
position: absolute;
width: 300px;
height: 265px;
filter: grayscale(100%);
transition: .25s;
left: 15px;
top: 15px;
}
.img-border1:hover img {
filter: none;
-webkit-filter: none;
}
.img-border1::after {
border: 4px solid orchid;
content: "";
display: block;
position: absolute;
top: 30px;
left: 30px;
right: -40px;
bottom: -40px;
}

<div class="img-border1">
<img src="https://assets.entrepreneur.com/content/3x2/2000/20191219170611-GettyImages-1152794789.jpeg" alt="">
</div>