Question

我在这里制作了一个jsfiddle来展示我目前的情况。在此鼠标悬停在链接上时，它仅突出显示部分而不是整个块。我们仍然可以在顶部和底部看到黑色。当鼠标悬停在它上面时，我想强调整个块。我怎么能在CSS中做到这一点？

此外，我在header.jsp中声明了这一点[所有人都很常见]并将其包含在所有其他文件中。那么当用户在该页面上时，如何保持链接突出显示？

Answer 1

一些小修改：

从height

中删除#navbar

从padding-top

中删除padding-bottom和#navBar ul li

将line-height: 42px;添加到#navBar ul li a

就是这样！：）

#navBar {
    float: right;
    background:#000;
    /* removed height here */
}
#navBar ul li {
    display: block;
    float: left;
    /* removed padding-top and padding-bottom here */
}
#navBar ul li a {
    display: block;
    padding: 4px;
    padding-left: 13px;
    padding-right: 13px;
    color: #fff;
    text-decoration: none;
    line-height: 42px;     /* added */
}

见这里：http://jsfiddle.net/YfQgZ/

Answer 2

查看jsfiddle：http://jsfiddle.net/pjgwb/2/

我修改了一下。现在悬停应该正常工作，如果您希望项目保持选中状态，则必须将selected类添加到对应的li标记

修改：现在以selected

为例

当鼠标在css中悬停时，突出显示整个块

2 个答案: