css - 嵌套在 li 中的 anchor 链接

Question

我正在我的网站上创建一个水平菜单，一切正常，但有一点。我在每个 <li> 中都有一个链接并且颜色设置为白色和li没有背景，但悬停时我想设置 li背景为白色并将文本颜色链接为黑色。问题是 <a> 的宽度tags 与 <li> 不同当鼠标悬停在 <li> 中的部分时但不在<a>两者都变成白色。据我所知， anchor 链接不能具有宽度属性，我尝试了不同类型的技巧但没有成功。有什么想法吗？

#primary-menu ul li {
    list-style-type: none;
    float: left;
    background-image: url('menu-sep.png');
    background-repeat: no-repeat;
    background-position: right;
}

#primary-menu li a:hover {
    color: black;
}

#primary-menu li:hover {
    background-color: white;
    color: black;
}
#primary-menu li a {
    color: white;
    text-decoration: none;
    padding-right: 8px;
    margin-right: 8px;
    width: 100%;
    height: 23px;
}

`

Answer 1

检查您的 <li>造型。他们可能有填充。将其移除， anchor 应占据整个可用空间。另外，更改 <a> 上的边距标记到填充。填充算作标签的一部分(即，将鼠标悬停在填充上会触发 :hover 伪选择器)，而边距则不会。