Question

所以我希望在悬停时让div（按钮）背景图像发生变化，并在悬停时向左移动20px，向上移动20px。现在当我悬停div时，背景图像会像我想要的那样在0.7s的转换上发生变化，但是位置变化没有过渡时间。对此的任何帮助都很棒

＆＃13;

    .buttons:hover{
    background: transparent;
    background-image: url('image2');
    right: 20px;
    top: -20px;
    }
    .buttons{
    position: relative;
    width:95%;
    height: 145px;
    background-image: url('image1');
    -webkit-transition: all 0.7s ease-out;
       -moz-transition: all 0.7s ease-out;
        -ms-transition: all 0.7s ease-out;
         -o-transition: all 0.7s ease-out;
            transition: all 0.7s ease-out;
    }
    .buttons h3{
    position: relative;
    top: 50px;
    }
    .buttoncontainer{
    width: 100%;
    text-align: center;
    }
    .buttoncontainer a{
    text-decoration: none;
    }

＆＃13;

<div class="buttoncontainer">
	<a href="#">
		<div class="buttons">
			<h3 style="font-family: helvetica;color:#13506D;">General IP Services <img src="arrow.png" alt="">
			</h3>
		</div>
	</a>
</div>

＆＃13;

Answer 1

为了让动画有效，它需要将从转换为到您的新位置。在转换之前定义top: 0;和right: 0;。

＆＃13;

.buttons:hover{
background: transparent;
background-image: url('image2');
right: 20px;
top: -20px;
}
.buttons{
position: relative;
width:95%;
height: 145px;
right: 0;        /* Define right */
top: 0;          /* Define top */
background-image: url('image1');
-webkit-transition: all 0.7s ease-out;
   -moz-transition: all 0.7s ease-out;
    -ms-transition: all 0.7s ease-out;
     -o-transition: all 0.7s ease-out;
        transition: all 0.7s ease-out;
}
.buttons h3{
position: relative;
top: 50px;
}
.buttoncontainer{
width: 100%;
text-align: center;
}
.buttoncontainer a{
text-decoration: none;
}

＆＃13;

<div class="buttoncontainer">
<a href="#">
    <div class="buttons">
        <h3 style="font-family: helvetica;color:#13506D;">General IP Services <img src="arrow.png" alt="">
        </h3>
    </div>
</a>
</div>

＆＃13;

背景图片有过渡时间但位置过渡不

1 个答案: