HTML – 两个图像都在移动

2023年7月27日 145次阅读

我试图通过使用两个图像彼此相邻

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过渡),但问题是当我尝试这样做时,右边的图像也会移动.

当其他图像移动时,如何使右侧图像不移动？

最佳答案 css变换怎么样？特别是
Translations. css转换不会影响布局中的保留空间,将所有其他对象保留在它们所属的位置.但要注意,转换后的对象会在其可视位置接收指针事件.另一点是它可以导致滚动条出现,除非层次结构中较高的元素溢出：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>
点赞