css - 当 li 悬停时如何更改 li 和 a 的背景颜色？

Question

所以这是我的问题，检查这个网站：

在左侧显示“更轻松地浏览游戏！” 我有 2 个 li 元素，其中包含链接。我想要实现的是当 li 悬停时 li 和 a 都会改变它们的颜色。

如果您现在尝试它，a 元素只会在完全悬停在它上面时改变它的颜色，而不是 li。

我尝试了以下方法：

<a href="#"><li>UNDER 5€&lt;/li></a>

但这在 li 元素（就在字母下方）留下了一些讨厌的线条，即使我认为我把 text-decoration:none 到处都是。

score 1 · Accepted Answer

首先，列表项应该在列表元素中而不是锚点中。如果您希望它们包含链接，则将锚点放在列表项中。

为了回答你的问题，我会使用

ul:hover li, ul:hover li a {background:red;}

score 1 · Accepted Answer

首先将您的标记更改为：

<li><a href='#'>Text</a></li>

然后在你的CSS中你可以这样做：

li a:hover{
    background-color: blue;
}

由于您a现在正在为li标签提供宽度，因此整个东西都会改变颜色。

2 回答 2