0

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

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

4

1 回答 1

0

我认为您只需要减少 #facebook:hover css 规则上的边距顶部值和边距底部值：

#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/

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

于 2013-06-26T05:56:45.773 回答