我试图让两张图片在悬停其中一张时对齐,但这不起作用
<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>
那么为什么这段代码不起作用呢?
发布于 2019-08-24 20:38:38
如果您想同时移动两个图像,则应捕捉父元素上的悬停
.div2:hover img {
transform: translate(0%, 0%);
}
发布于 2019-08-24 20:17:23
因为它正在查找"img“中具有类"img-left”或"img-right“的元素。
正确答案应该是这样的
.div2 img.img-left:hover {
transform: translate(0%, 0%);
}
.div2 img.img-right:hover {
transform: translate(0%, 0%);
}
https://stackoverflow.com/questions/57641214
复制