导航栏着色链接

Question

我的导航栏出现问题，并且已经卡在这个问题上几个小时了。 我的导航栏如下所示：

<div id="pages">
        <?php wp_nav_menu();?>
    </div>

非常简单的 wordpress 导航栏。 Wordpress 自动为该菜单上的每个页面提供一个类名，例如 .page-item-30 ，同时 wordpress 也为它们提供了所有类 .page-item。

我想要实现的是，当我将鼠标悬停在 1 页时，背景变为红色（#ff0000），字体颜色变为白色；我的 CSS 看起来像这样

#pages li{
display: inline;
float: left;
height: 20px;
padding: 5px;
margin: 0px;
margin-top: -17px;
transition: all 0.2s ease-in-out;
}
#pages li:hover{
background-color: #ff0000;
}
/** 
.page-item-27:hover a{
color: white;
transition: all 0.2s ease-in-out;
}
.page-item-2:hover a{
color: white;
transition: all 0.2s ease-in-out;
}
.page-item-21:hover a {
color: white;
transition: all 0.2s ease-in-out;
}
**/
.page-item:hover a {
color: white;
transition: all 0.2s ease-in-out;
}

.current_page_item {
background-color: #ff0000;
}
.current_page_item a{
color: white;
}

现在我尝试使用 .page-item-27 左右定义字体颜色何时必须更改，但这非常不可靠，因为它依赖于页面的正确 ID。因此，如果我有一个 ID 不在我的 CSS 中的新页面，我的导航将无法正常工作。

有没有办法改变字体的颜色？

在我当前的 css 中有这个

.page-item:hover a {
color: white;
transition: all 0.2s ease-in-out;
}

在我看来应该可行，但它没有。

如果您在danielps1.de 下不完全理解，可以查看我的实时页面。只需将我的导航悬停在左侧

感谢您的帮助

Answer 1

我认为你的问题只是一个小错误。

你的 CSS 选择器应该是：

.page_item a:hover{
    color: white;
    transition: all 0.2s ease-in-out;
}

代替：

.page-item:hover a {
    color: white;
    transition: all 0.2s ease-in-out;
}

希望我能帮上忙。

Answer 2

尝试使用

li.page_item a:hover {
    color: white;
}

作为 CSS 选择器！