停止css過渡來移動其他元素的懸停

Question

如何獲得第二個圖像不移動時懸停第一個圖像，反之亦然？目前，非懸停式圖像正在改變其位置。

http://jsfiddle.net/Lswbf7ou/

<img class="first-hover" src="http://img4.wikia.nocookie.net/__cb20121125171115/bradlykart/images/0/09/100px-ToadtheShroom.png"/> 
<img class="second-hover" src="http://img4.wikia.nocookie.net/__cb20121125171115/bradlykart/images/0/09/100px-ToadtheShroom.png"/> 

img.first-hover { 
height:80px; 
-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; 
} 

img.second-hover { 
height:80px; 
-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; 
} 

img.first-hover:hover { 
height:100px; 
-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; 
} 

img.second-hover:hover { 
height:100px; 
-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

您可以使用position: absolute，檢查jsfiidle：

http://jsfiddle.net/jcskc4hk/

Answer 2

您應該我們position在img.first-hover，img.second-hover類。

img.first-hover { 
    height:80px; 
    -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; 
    position: absolute; 
} 

img.second-hover { 
    left:70px; 
    height:80px; 
    -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; 
    position: absolute; 
}