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。所以，如果我有一个不在我的CSS中的ID的新页面我的导航无法正常工作。

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

在我目前的CSS中有这个

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

在我的心中应该有效，但它没有。

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

感谢您的帮助

Answer 1

尝试使用

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

作为CSS选择器！

Answer 2

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

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

希望我能提供帮助。

导航栏着色链接

2 个答案: