为什么悬停时无法设置持续时间答案

【问题标题】：Why I can't set duration when hover over为什么悬停时无法设置持续时间
【发布时间】：2015-07-06 23:45:20
【问题描述】：

我在图像上设置了缩放比例，并设置了悬停持续时间 5 秒，但是当我从图像中移动鼠标时，我的图像没有缓出 5 秒的持续时间，我想你明白我的意思。

<img src="http://spmhire.com/wp-content/uploads/2014/11/rolls-royce.jpg">

CSS

img{
 width:150px

}
img:hover{
     transform: scale(2,3);
     transition: transform 1500ms ease;
}

我试图设置过渡：500ms 缓出 1s；但不工作

【问题讨论】：

你用的是什么浏览器？当我运行您的 JSfiddle 时，它适用于我在最新的 Chrome 上。

标签： html css

【解决方案1】：

您需要将过渡应用到元素本身，而不是 :hover psuedo-class:

img {
   width:150px;
   transition: transform 1500ms ease-in-out;
}

img:hover{
     transform: scale(2,3);
}

见：http://jsfiddle.net/oqa88vdo/3/

这背后的原因是 CSS 过渡定义了如何应用对元素的更改。您首先在元素上设置过渡行为，然后任何更改的 CSS 都将使用该过渡行为。

developer guides at Mozilla cover this very well，值得一读。

【讨论】：

【解决方案2】：

你也需要设置非悬停样式的参数，像这样：

https://jsfiddle.net/oqa88vdo/

img{
   width:150px;
   transform: scale(1,1); 
    transition:transform 1500ms ease;
        
}
img:hover{
     transform: scale(2,3);
     transition: transform 1500ms ease;
}

&lt;img src="http://spmhire.com/wp-content/uploads/2014/11/rolls-royce.jpg"&gt;

【讨论】：