onmouseover/onmouseout上的轉換不起作用？

如何在不更改html代碼的情況下輕鬆進入工作狀態？ http://jsfiddle.net/68ojLg6p/onmouseover/onmouseout上的轉換不起作用？

<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; 
}

來源

2014-09-27 user3906056

不能使用CSS過渡的JavaScript ... – Mooseman 2014-09-27 16:36:08

像駝鹿上面說的。 [這]（http://jsfiddle.net/TheBanana/68ojLg6p/1/）是一樣接近，你會得到... – Banana 2014-09-27 16:41:53

-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">

來源

2014-09-27 16:45:11 MWLindenbach

onmouseover/onmouseout上的轉換不起作用？

回答

相關問題