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

时间:2014-10-22 09:16:44

标签: css

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

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

2 个答案:

答案 0 :(得分:4)

您可以使用position: absolute,检查jsfiidle:

http://jsfiddle.net/jcskc4hk/

答案 1 :(得分:0)

您应该positionimg.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;
}