html - 如何将过渡应用到列表元素并使其增长而不影响其背景图像或其他列表项？

Question

我正在设计一个平面设计网站，最近我一直专注于导航栏。传统上，我想在彩色背景上使用简单的图标，当用户的鼠标悬停在它上面时颜色会变暗。所以我通过使用列表项背景作为颜色和图片的“ anchor ”元素来完成这项工作。但后来我希望它有更多的互动性。所以我决定我希望列表项在保持简单图标大小不变的同时增长，并且不影响其他列表项的放置。到目前为止，我已经让列表项增长并保持在原位，但是当将鼠标悬停在列表项上时，背景会变形并且列表项的其余部分会向下移动。这是我的 CSS:

div#nav{
    width:auto;
    height:43px;
    padding-top:15px;
    padding-right:15px;
    padding-bottom:5px;
    background-color:rgba(100,100,100,0.2);
    border-left-color:rgba(255,255,255,0.2);
    border-right-color:rgba(255,255,255,0.2);
    border-right-width:1px;
    border-right-style:solid;
    border-left-width:1px;
    border-left-style:solid;
    border-top-width:1px;
    border-top-style:solid;
    border-top-color:rgba(255,255,255,0.2);
    margin-left:auto;
    margin-right:auto;
}
#nav ul{
    padding:0;
    list-style:none;
    display:inline-block;
    margin:0;
}
#nav ul li{
    width:48px;
    height:48px;
    margin-left:15px;
    display:inline-block;
    background-color:#000000;
    padding:0;
}
#nav ul li a{
    z-index:10;
}
#googleplus{
    width:48px;
    height:48px;
    background-image:url('images/googleplus.png');
    display:block;
}
#facebook{
    width:48px;
    height:48px;
    background-image:url('images/facebook.png');
    display:block;
}
#twitter{
    width:48px;
    height:48px;
    background-image:url('images/twitter.png');
    display:block;
}
#youtube{
    width:48px;
    height:48px;
    background-image:url('images/youtube.png');
    display:block;
}
#minecraft{
    width:48px;
    height:48px;
    background-image:url('images/minecraft.png');
    display:block;
}
#nav ul li#googleplus{
    background-color:#d34836;
    transition:background-color;
    transition-duration:0.17s;
}
#nav ul li#googleplus:hover{
    background-color:#c23725;
}
#nav ul li#facebook{
    background-color:#3b5998;
    transition:background-color,padding,margin-left,margin-right,margin-top,margin-bottom;
    transition-duration:0.17s,0.17s,0.17s,0.17s,0.17s,0.17s;
}
#nav ul li#facebook:hover{
    background-color:#2a4887;
    padding:5px;
    margin-left:10px;
    margin-right:-5px;
    margin-top:-5px;
    margin-bottom:5px;
}
#nav ul li#twitter{
    background-color:#4099ff;
    transition:background-color;
    transition-duration:0.17s;
}
#nav ul li#twitter:hover{
    background-color:#2077dd;
}
#nav ul li#youtube{
    background-color:#de443e;
    transition:background-color;
    transition-duration:0.17s;
}
#nav ul li#youtube:hover{
    background-color:#bc221c;
}
#nav ul li#minecraft{
    background-color:#5e5645;
    transition:background-color;
    transition-duration:0.17s;
}
#nav ul li#minecraft:hover{
    background-color:#4d4534;
}
.p-flexbox{
    display: -webkit-box;
    display: -moz-box;
    display: box;
}
.flex-hcc{
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
}

这是 HTML:

<div id="nav" class="p-flexbox flex-hcc">
    <ul>
        <li id="facebook" ><a id="facebook" href="#" ></a></li>
        <li id="twitter" ><a id="twitter" href="#" ></a></li>
        <li id="youtube" ><a id="youtube" href="#" ></a></li>
        <li id="minecraft" ><a id="minecraft" href="#" ></a></li>
    </ul>
</div>

谁能想出一种方法来使列表项变大，但要使 anchor 的背景图像保持在相同的位置和大小，并且不影响其他列表项的位置？

Answer 1

我认为您只需要减少#facebook:hover css 规则中的 margin top 值和 margin bottom 值:

#nav ul li#facebook:hover{
    background-color:#2a4887;
    padding:5px;
    margin-left:10px;
    margin-right:-5px;
    margin-top:-15px;
    margin-bottom:0px;
}

请参阅此 fiddle :http://jsfiddle.net/jessekinsman/wgLWT/3/

不确定这是否是您想要达到的目的。它们在底部排成一行，其他元素没有移动。