Question

我需要帮助。它已经花了我一个小时左右，我仍然无法使它工作。我在index.html页面中有这个：

<header>
    <img src = "Images/logo.png">
    <div id = "links">
        <a href = "http://www.facebook.com">
            <img src = "Images/fb.png" align = "middle" alt = "">
        </a>
        <a href = "http://www.twitter.com">
            <img src = "Images/twitter.png" align = "middle" alt = "">
        </a>
        <a href = "http://www.youtube.com">
            <img src = "Images/yt.png" align = "middle" alt = "">
        </a>
    </div>
</header>

这些链接图像为64x64像素。我在CSS中将它们缩放到32x32。我希望当我将鼠标放在特定图像上方时，只有一个要放大，其他应该留在它们所在的位置。

首先，我将div放在标题的右上角。那部分按预期工作。

#links {
    text-align: center;
    float: right;
    position: absolute;
    right: 38px;
    top: 12px;
}

以32x32显示图像也运作良好。

div#links a img {
    height: 32px;
    width: 32px;
}

我对这部分有疑问：

div#links a:hover img {
height: 38px;
width: 38px;}

正在发生的是所有3张图片正在移动。我在本网站和其他一些网站上阅读了很多主题。首先我认为这是因为图像不在div容器中居中。尝试vertical-align以及text-align但没有成功。但是，我能够使用http://jsfiddle.net/B6Jsy/将图像居中放在div的中心，并且所有图像仍在悬停上移动。我认为发生的事情是当一个图像悬停并放大时，其他图像从它们的位置移动到div的中心（div被调整大小）。只是出于想法如何处理。

我需要一些CSS sugestion如何解决这个问题。提前谢谢。

Answer 1

当您将鼠标悬停在img上时，宽度会发生变化，因为这些项目处于正常流程中（例如，未定位），当您更改其中任何一个的宽度时，其他图标会移动是正常的。

要解决这个问题，你可以使用这样的CSS转换：

div#links a:hover img {
   transform: scale(1.15);
}

<强> DEMO

图像链接一起移动

1 个答案: