为什么我不能悬停？

Question

当我将两张图片悬停在其中一张上时，我试图使它们彼此对齐

<style>
.div2 img{
  height: 300px;
  cursor: pointer;
}
.img-left {
  transform: translate(0%, -10%);
}
.img-right {
  transform: translate(0%, 10%);
}
.div2 img:hover .img-left {
  transform: translate(0%, 0%);
}
.div2 img:hover .img-right {
  transform: translate(0%, 0%);
}
</style>
<div class="div2">
 <img class="img-left" src="img/trico-left.png">
 <img class="img-right" src="img/trico-right.jpg">
</div>

那为什么这个代码不起作用

Answer 1

因为它正在查找“ img”中具有“ img-left”或“ img-right”类的元素

正确的答案就是这样

.div2 img.img-left:hover {
  transform: translate(0%, 0%);
}
.div2 img.img-right:hover {
  transform: translate(0%, 0%);
}

Answer 2

如果您想同时移动两个图像，则应将鼠标悬停在父元素上

.div2:hover img {
  transform: translate(0%, 0%);
}