谁能帮忙。 我有一张蝴蝶的图片,当悬停在上面时,它会弹出一点。我还有一张毛毛虫的照片。麻烦的是,当蝴蝶悬停在另一个图像上时,它也在移动。我该如何阻止它?
CSS 是
/*Pink Butterfly - header*/
.pinkbutterfly {
width: 80px;
height: 80px;
overflow: hidden;
position: relative;
top:-30px;
left:230px;
}
.hoverimg:hover{
width: 95px;
height: 95px;
position: relative;
top:-30px;
left:220px;
}
/*Blue/Yellow Caterpillar - header*/
.blueyellowcaterpillar{
width: 140px;
height: 80px;
overflow: hidden;
position: relative;
top:30px;
left:550px
}
HTML:
<div id="headercontent">
<img src="nurserylogo.png" alt="Cassiltoun Stables Nursery Logo" class="nurserylogo">
<img src="Edited Characters/pinkbutterfly.png" alt="pinkbutterfly" class="pinkbutterfly hoverimg">
<img src="Edited Characters/blueyellowcaterpillar.png" alt="blueyellowcaterpillar" class="blueyellowcaterpillar choverimg">
<p style="font-family:'FeltTip'">Tel: 0141 631 5235</p>
<div id="navigation">
<ul class="navlist">
<li> about </li>
<li> pictures </li>
<li> find us </li>
<li> contact</li>
</ul>
</div>
</div>
最佳答案
改变元素的大小会使布局重新排列。
要在不影响布局的情况下让它变大,试试
.hoverimg:hover {
-webkit-transform: scale (1.2);
transform: scale (1.2);
}
这应该会使它变大,并使其保持在先前位置的中心。 如果这不是您想要的,请添加
-webkit-transform-origin (top, center);
transform-origin (top, center);
关于html - 悬停效果使其他元素移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17067510/