我在一行中有4张图片作为链接,我在悬停时将它们调整大小,但是当我将其中一张图片悬停时,它会按照我的预期进行调整,但其他未悬停的图像会以50px向下移动。 如何避免其他图片向下移动?
我的代码是: HTML:
<a href=""><img src="cover (1).jpg" class="cover"><a>
<a href=""><img src="cover (2).jpg"class="cover"><a>
<a href=""><img src="cover (3).jpg"class="cover"><a>
<a href=""><img src="cover (4).jpg"class="cover"><a>
Css:
img.cover{
height:100px;
Width:100px;
padding-top:25px;}
img.cover:hover {
height:150px;
width:150px;
margin-top:auto;}
答案 0 :(得分:2)
如果您的意思是希望其他图片保持在同一位置,那么您正在寻找absolute positioning。
或者,如果您只希望其中所有四个对齐到顶部而不是底部,请将margin-top:auto
替换为vertical-align:top
。
答案 1 :(得分:0)
编辑:扩展答案with an example以显示绝对定位所需的全部内容,因为Lister先生不喜欢我的短版本,只是指出需要绝对定位的事实将它们从流动中取出:
HTML
<a href="" class="cover"><img src="cover (1).jpg" /></a>
<a href="" class="cover"><img src="cover (2).jpg" /></a>
<a href="" class="cover"><img src="cover (3).jpg" /></a>
<a href="" class="cover"><img src="cover (4).jpg" /></a>
CSS
.cover {
position: relative;
display: inline-block;
height:100px;
width:100px;
padding-top:25px;
}
.cover img {
position: absolute;
width: 100%;
height: 100%;
border: 1px solid blue;
}
.cover img:hover {
height:150px;
width:150px;
}