Question

我正在我的网站上创建一个水平菜单，一切都很好，但有一件事。我在每个<li>都有一个链接，颜色设置为白色，li没有背景，但在悬停时我想将li背景设置为白色，并将文字颜色链接为黑色。问题是<a>标记的宽度与<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>样式。他们可能有填充物。将其拆下，锚杆应占据整个可用空间。另外，将<a>标记上的边距更改为填充。填充计数作为标记的一部分（即，悬停在填充上使其触发:hover伪选择器），而边距则不会。

Answer 2

正如你上面写的那样应该可以工作，但是你说这是行不通的，那就试着让类只引用像文本一样。

.liText
{
color:white;
}

.liText:hover
{
color:black;
}

希望这会奏效。

在您的代码中使用class属性。像

<a class="liText"> // for single class

如果你想为一个标签使用两个或更多个类，那么在给出空格之后使用另一个类，如下所述。

<a class="firstClass SecClass ThirdClass">

锚链接嵌在一个李

2 个答案: