html - 为什么我不能悬停？

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%);
}