css - 导航栏着色链接

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;
}

希望我能帮上忙。