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的答案，只有一个包装div和更少的代码......

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

如果没有，那我很抱歉，我会删除这个答案。我想先评论一下，但我的声誉还没达到50。

图像在悬停点下不受CSS影响

2 个答案: