Question

如何在悬停第一张图像时让第二张图像不移动，反之亦然？现在，非悬停的图像正在改变它的位置。

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

停止css转换以在悬停时移动其他元素

2 个答案: