如何在不影响其背景图像或其他列表项的情况下将转换应用于列表元素并使其增长

Question

我正在开发一个平面设计网站，最近我一直专注于导航栏。传统上，我想在彩色背景上使用简单的图标，当用户的鼠标悬停在背景上时，背景会变得更暗。因此，我通过使用列表项背景作为颜色和图片的"锚"项来实现这一点。但后来我希望它能有更多的互动性。因此，我决定让列表项增长，同时保持简单图标的大小不变，并且不影响其他列表项的位置。到目前为止，我已经让列表项增长并保持不变，但当列表项悬停在上面时，背景会失真，其余列表项会向下移动。这是我的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>

有人能想出一种方法来增加列表项，但保持锚的背景图像保持在相同的位置和大小，并且不影响其他列表项的位置吗？

Answer 1

我认为你只需要减少#facebook:hover css rule:上的页边空白顶部值和页边空白底部值

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

看看这把小提琴：http://jsfiddle.net/jessekinsman/wgLWT/3/

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