Question

提前感谢您抽出时间为我看这个。我对制作网站有点新意;我知道基础知识和一些高级的东西。我在我的投资组合页面上工作，我正在使用图标进行导航。我把它们都放在一个div里面，而且我把它们放在相对位置，所以我可以将它们保存在div中。我的问题出现了，当我向图标添加CSS过渡以使它们在悬停时放大，当我将鼠标悬停在它们上时，图标将其他图标向下推。我知道我可以使用绝对定位，这不会发生，但我不愿意。有小费吗？

这是我的代码：

HTML：

    <div id="container_1">
<img class="icon" id="abouticon" src="assets/icons/abouticon.fw.png" width="80"      height="80">
<br>
<img class="icon" id="portfolioicon" src="assets/icons/portfolioicon.fw.png" width="80" height="80">
<br>
<img class="icon" id="facebookicon" src="assets/icons/facebookicon.fw.png" width="80" height="80">
<br>
<img class="icon" id="contacticon" src="assets/icons/emailicon.fw.png"  width="80" height="80">

我的CSS：

        #container_1    {
    position: relative;
    width: 80%;
    height: 100%;
    margin-top: 0%;
    margin-right: 25%;
    margin-left: 10%;
    margin-bottom: 25%;
    z-index: 1;
}

.icon   {
    transition: .2s ease;
    padding: 20px 20px 20px 20px;
}

.icon:hover {
    padding: 20px 20px 20px 20px;
    height: 90px;
    width: 90px;
    transition: .3s ease;
    position: relative;
    z-index: 2;
}



#abouticon  {
    top: 50px;
    left: 0px;
    position: relative;
}

#portfolioicon  {
    top: 50px;
    left: 0px;
    position: relative;
}

#facebookicon   {
    top: 50px;
    left: 0px;
    position: relative;
}

#contacticon    {
    top: 50px;
    left: 0px;
    position: relative;
}

Answer 1

如果要更改相对定位的块元素的宽度，高度，填充或边距，则基本上会更改框的属性，这将不可避免地导致重新定位流中的其他元素。

我会改用变换：

.icon:hover {
    transform: scale(1.25, 1.25);
    -moz-transform: scale(1.25, 1.25);
    -webkit-transform: scale(1.25, 1.25);
    -o-transform: scale(1.25, 1.25);
}

这会将图标缩小到+ 25％，而不会影响其任何框属性。

请注意：为了使其按照您希望的方式工作，您必须从.icon:hover声明中删除对宽度，高度，边距或填充的所有更改。

另请注意：您无需在:hover声明中重新应用所需的转换。只需将它声明为基本状态（在.icon的声明中即可）。

如何防止CSS转换影响我页面上的其他图标？

1 个答案: