图像不受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。