(css) 在网格中使用 div:hover 时，下一个图像会经历过渡

Question

我使用网格对页面中的布局进行排序。当我将悬停效果悬停在 img 中时，在div 中，它有点中断，所以我不想这样做。

在我尝试在整个div 上悬停效果后，但是这次当我将鼠标悬停在div 上时，它会转换其他div 的图像。是什么原因造成的，如何解决？

.HTML

<div class="content1" id="webpages">
<div class="cards" id="card1">
<img src="https://dummyimage.com/300x168/000/ffffff&text=dummy+box1" alt="webpage unavaliable">
</div>
<div class="cards" id="card2">
<img src="https://dummyimage.com/300x168/000/ffffff&text=dummy+box2" alt="webpage unavaliable">
</div>
<div class="cards" id="card3">
<img src="https://dummyimage.com/300x168/000/ffffff&text=dummy+box3" alt="webpage unavaliable">
</div>
<div class="cards" id="card4">
<img src="https://dummyimage.com/300x168/000/ffffff&text=dummy+box4" alt="webpage unavaliable">
</div>
</div>

.CSS

/* Cards layout Starts Here */
.cards {
border: 1px solid #000;
position: relative;
height: 300px;
width: 300px;
overflow: hidden;
}
.cards img {
position: absolute;
top: 0;
left: -50px;
height: auto;
width: 400px;
transition: all 1s ease;
}
.cards:hover+.cards img {
position: absolute;
top: 22%;
left: 0;
height: auto;
width: 298px;
}
.cards #plus {
width: 50px;
height: auto;
display: block;
}
/* Cards layout Ends Here */
/* Grids Starts Here */
.content1 {
display: grid;
grid-template-columns: auto auto;
gap: 20px;
}
/* Grids Ends Here */

Answer 1

你有错误的 css 选择器，而不是 .cards：hover+.cards img 应该是.cards：hover img