Question

我一直在尝试这样做，但它不起作用。它应该将图像移动10px，但事实并非如此。那个div里面有{{ dayform.vars.data.calculatedTotal|date('H:i') }} // or {{ dayform.calculatedTotal|date('H:i') }} css，我认为是因为这个原因。我试过了left，但它没有用。

这是JSFiddle：https://jsfiddle.net/jwbvxhv0/1/

!important

$(".seen").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function(){
  $(this).removeClass("animated")  
})

$(".seen").hover(function(){
  $(this).addClass("animated");        
})

Answer 1

您可以使用translate变换进行左/右移动，因为它不会影响任何邻居元素的位置。要使转换顺利进行，您需要在transition属性上为您的图片添加transform。

更新：如果你有一个img旁边的按钮，它有你提到的更高的z-index。您需要将相同的效果应用于包含该图像和该按钮的父元素。

.moving-left
{
  height: 100px;
  position: relative;
  transition: transform 0.3s ease;
  transform: translateX(0px);
  width: 100px;
}
.moving-left:hover
{
 transform: translateX(10px);
}

.moving-left button
{
  left: 8px;
  position: absolute;
  top: 30px;
  z-index: 99;
}

<div class="moving-left">
  <img src="http://placehold.it/100X100" alt="" />
  <button>Button here</button>
</div><!--.moving-left-->

CSS - 悬停在左侧移动图像，如果没有悬停，则返回原始位置

1 个答案: