css - onmouseover/onmouseout 上的过渡不起作用？

Question

如何在不更改 html 代码的情况下使 ease-in-out 工作？ http://jsfiddle.net/68ojLg6p/

<img class="transition-img" 
onmouseover="this.src='http://1.bp.blogspot.com/-ISjKMLTnaTQ/Ty-USX-J1uI/AAAAAAAAC_0/YB6MUMflRmg/s400/ferrari+_car_wallpapers.jpg'" 
onmouseout="this.src='http://2.bp.blogspot.com/-vAbVucAOQXA/TWPq-p9hPEI/AAAAAAAAAjQ/wVABlnpN6xE/s400/2011-cars-images-audi-r8-tdi-le-mans-04.jpg'" 
src="http://2.bp.blogspot.com/-vAbVucAOQXA/TWPq-p9hPEI/AAAAAAAAAjQ/wVABlnpN6xE/s400/2011-cars-images-audi-r8-tdi-le-mans-04.jpg" alt="" height="300" width="400">

css:
 .transition-img:hover {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
 -o-transition: all 1s ease-in-out;
 transition: all 1s ease-in-out;
 }

Answer 1

CSS 过渡不适用于 javascript。如果您想使用过渡，您需要在 CSS 端处理图像，请参见下文。

.transition-img {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  background-image: url('http://2.bp.blogspot.com/-vAbVucAOQXA/TWPq-p9hPEI/AAAAAAAAAjQ/wVABlnpN6xE/s400/2011-cars-images-audi-r8-tdi-le-mans-04.jpg');
}
.transition-img:hover {
  background-image: url('http://1.bp.blogspot.com/-ISjKMLTnaTQ/Ty-USX-J1uI/AAAAAAAAC_0/YB6MUMflRmg/s400/ferrari+_car_wallpapers.jpg');
}

<img class="transition-img" alt="" height="300" width="400">