Question

如何在不更改html代码的情况下轻松进行工作？ 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 Transitions不适用于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">

onmouseover / onmouseout上的转换不起作用？

1 个答案: