圖像不受CSS懸停點下的影響

Question

我試圖讓圖像在較大的圖像上徘徊，而另外兩個圖像較小，但只有徘徊圖像下方的圖像會受到影響。請幫忙。

小提琴這裏：FIDDLE

代碼在這裏：

<img src="http://hornzach.bugs3.com/assets/images/news/blue.png" alt="" width="100" height="96" class="post72914 post72914img1"/><br> 
<img src="http://hornzach.bugs3.com/assets/images/news/oak.png" alt="" width="100" height="97" class="post72914 post72914img2"/><br> 
<img src="http://hornzach.bugs3.com/assets/images/news/red.png" alt="" width="100" height="92" class="post72914 post72914img3"/> 

<style type="text/css"> 
<!-- 
.post72914 { 
    -webkit-transition: all .5s ease; 
    -o-transition: all .5s ease; 
    transition: all .5s ease; 
} 
.post72914img1:hover{ 
    width:210px; 
    height:200px; 
} 
.post72914img2:hover{ 
    width:210px; 
    height:200px; 
} 
.post72914img3:hover{ 
    width:210px; 
    height:200px; 
} 

.post72914img1:hover ~ img.post72914img2 {width:50px; height:60px;} 
.post72914img1:hover ~ img.post72914img3 {width:50px; height:60px;} 
.post72914img2:hover ~ img.post72914img1 {width:50px; height:60px;} 
.post72914img2:hover ~ img.post72914img3 {width:50px; height:60px;} 
.post72914img3:hover ~ img.post72914img2 {width:50px; height:60px;} 
.post72914img3:hover ~ img.post72914img1 {width:50px; height:60px;} 
--> 
</style> 

Answer 1

另一隻CSS-答案，用一個包裹股利和少了很多代碼...

http://jsfiddle.net/94dpn3s4/2/

img {  
    -webkit-transition: all .5s ease; 
    -o-transition: all .5s ease; 
    transition: all .5s ease; 

    height: 100px; 
    width: auto; 
} 

div { 
    display: inline-block; 
} 

div:hover img { 
    height: 50px; 
} 

div:hover img:hover { 
    height: 200px; 
} 

Answer 2

如果你想獲得這個問題擺脫你的頭痛，只需使用一些jQuery的魔術這樣的：

$('.img').hover(
    function(){ 
     $('.img').not(this).each(function(){ 
      $(this).stop(true,false).addClass('imgSmall'); 
     }); 
    }, 
    function(){ 
     $('.img').removeClass('imgSmall'); 
    } 
); 

jsfiddle Example

如果不是，那麼我很抱歉，我w虐待刪除這個答案。我想先評論一下，但是我的聲望尚未達到50。