Question

如何缩短边框线但是当悬停特定标签时，背景颜色会完全突出显示？谢谢！

此处附有图片：

https://drive.google.com/file/d/0B6FwTbVhsVH9dkxPejZHYXhwU2M/view?usp=sharing

您可能需要查看我在JSFiddle上所做的事情。

Answer 1

这是老兄

JSFIDDLE

您只需要正确构建html即可 li更大然后悬停bg并使用border

.navigation .nav li {
    position: relative;
    display: inline-block;
    color: #FFF;
    margin: 10px 0;
    font-size: 0;
    padding: 10px 0;
}
.navigation .nav li a{
    padding: 10px;
    border-left: 1px solid #6b6b6b;
    font-size: 14px;
    display: block;

}

注意

font-size: 0;用于导航，然后用于锚font-size: 14px;是因为display: inline-block;的错误导致元素之间的像素差距很小。你当然可以使用float: left;，但你做inline-block所以我修复它

导航边框短，但背景颜色完全突出显示

1 个答案: