html - 两个图像都在移动

Question

我试图通过使用将两张图片放在一起

span.img {
  position: absolute;
  margin-left: 100px;
  transition: margin 0.5s;
  height: 150px;
  width: 150px;
}
span.img:hover {
  margin-left: 0px;
}
span.image {
  margin-left: 350px;
  transition: margin 0.5s;
  height: 150px;
  width: 150px;
}
span.image:hover {
  margin-left: 450px;
}

<span>
  <img src="http://placehold.it/200/FF6347/FFF" />
</span>
<span>
  <img src="http://placehold.it/200/47E3FF/000" />
</span>

我想在鼠标悬停时移动左边的那个(通过 css 中的过渡)，但问题是当我尝试这样做时，右边的图像也会移动。

如何让右边的图片在另一张图片移动时不移动？

Answer 1

css 转换怎么样？ Translations尤其。 css 转换不会影响布局中的保留空间，将所有其他对象保留在它们所属的位置。不过请注意，转换后的对象确实在其可视位置接收指针事件。另一点是它可能导致滚动条出现，除非层次结构中较高的元素具有 overflow: hidden。

span.image {
  /* Inline block causes width and height to affect the span element. */
  display:inline-block;
  height: 150px;
  width: 150px;
}
span.image img{
  transition:transform 0.2s ease-in-out;
  transform: translate(0,0);
  /* Hovering over the image causes the transition to take effect.*/
  /* This can cause weird bouncing effects. As such ignore pointer events.*/
  pointer-events:none !important;
  
}
span.image:hover img {
  transform: translate(350px, 0);
}

<span class="image">
  <img src="http://placehold.it/200/FF6347/FFF" />
</span>
<span class="image">
  <img src="http://placehold.it/200/47E3FF/000" />
</span>