Question

CSS初学者

img {
    top: 0;
    transition: all 0.5s ease-out;
}
img:hover {
    position: relative;
    top: -5px;
}

悬停时，此过渡效果很好。但是当你再次鼠标移开时没有任何效果，“反向”过渡是即时的。如何在反向过渡时达到0.5秒？

Answer 1

只需将position: relative从:hover规则移至img规则即可。如果不悬停，则img元素不会相对定位。 top属性对静态定位的元素没有任何作用。

img {
    position: relative;
    top: 0;
    transition: all 0.5s ease-out;
}
img:hover {
    top: -5px;
}

Answer 2

img {
    position: relative;
    top: 0;
    transition: all 0.5s ease-out;
}
img:hover {
    top: -5px;
}

Answer 3

此问题已得到纠正。请看一下。

＆＃13;

img {
  width: 136px;
  height: 23px;
  -webkit-transition: width 2s;
  /* For Safari 3.1 to 6.0 */
  transition: width 2s;
}
img:hover {
  width: 300px;
}

＆＃13;

<div style="background-color:red;">
  <img src="http://jsfiddle.net/img/logo.png">
</div>

＆＃13;

View on JSFiddle

简单的CSS反向转换

3 个答案: