Question

我尝试使用

将两张图片放在一起

＆＃13;

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

＆＃13;

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

＆＃13;

我希望在鼠标悬停时移动左边的那个（通过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>

Answer 2

只需将差异id或class es添加到您的span代码中，然后编写不同的动画即可。这应该可以解决你的问题。

Answer 3

尝试使用bootstrap div。这是代码：

<div class = "container">
    < div class = "row">
       <div class = "col-md-6"> //you can use anyone here

              insert image

两幅图像都在移动

3 个答案: