css中链接：hover下文字颜色无法修改的问题

最新推荐文章于 2023-08-15 15:00:29 发布

原创最新推荐文章于 2023-08-15 15:00:29 发布 · 5.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#超链接 #伪元素 #文本颜色

本文讨论了在CSS中遇到链接:hover状态下无法改变文字颜色的常见问题。错误的选择器使用，如使用li或div而非a，可能导致这个问题。解决方法包括确保正确的选择器路径，使用更高的特殊级别，例如id选择器，以及正确使用display: flex来避免嵌套带来的复杂性。欢迎读者在评论区分享更多解决方案。

<ul>
            <li>
                <a href="images/crown.jpeg" >Crown</a>
            </li>
            <li>
                <a href="images/light.jpg">Fireworks</a>
            </li>
            <li>
                <a href="images/mission.jpeg">Mission</a>
            </li>
</ul>

错误的css

a {
    color: rgb(75, 75, 75);
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
}

li:hover {
    background-color: #333;
    color: rgb(255, 255, 255);
}

你能发现问题在哪里嘛？对！就是选择器错了，不是li:hover而是a:hover ：hover前必须是a，不能是别的。所以建议nav里不要用ul，li。直接用,然后用display：flex弹性盒修改就行，不然容易出错还麻烦。

一般：hover 中改不了文本颜色，1.看看css的应用路径是否有问题。 2.看看：hover前的选择器是否特殊级比较低。如果是的话，设置id。3.可能是你选择器错了，是链接a而不是li或什么其他的。欢迎在评论区补充。