Question

我已经包含了一个jsfiddle来向你展示一个例子。我的导航ul项设置为白色背景，字体为红色。当我想要两种颜色交换时，背景变成红色，字体变成白色。在我将锚标签放入其中之前，但是在悬停后字体没有变为白色。如果我加上这个：

nav ul li a:hover{
    color:white;
}

字体将变为白色，但不会在盒子悬停时，但仅当字体本身悬停时，但我希望字体在列表项目框中悬停时变为白色。有帮助吗？谢谢！

jsfiddle：http://jsfiddle.net/xNZxF/

Answer 1

添加：

nav ul li:hover a{
    color:white;
}

<强> jsFiddle example

要与宽松相匹配，您可能还需要将-webkit-transition: all .5s ease-in-out;添加到nav ul a。

<强> jsFiddle example

Answer 2

只需将以下内容添加到CSS中即可。

nav ul li:hover > a {
    color: white;
}

同时从color: white;删除nav ul li:hover。您试图在li内更改a内文本的文字颜色的地方。nav ul li:hover > a。使用a，您可以在nav ul li悬停时更改{{1}}的颜色。这并没有给文本过渡到它的悬停颜色，但我认为你可以自己解决这个问题。祝你好运！

Answer 3

放手一搏：

nav ul li:hover a {
    color: white;
}

导航中的锚标记导致悬停颜色不起作用

3 个答案: