导航栏着色链接

-1

我遇到了我的导航栏问题，并且在此停留了几个小时。我的导航条是这样的：导航栏着色链接

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

现在，我尝试使用。第项-27左右的时候字体颜色有改变，但，这是非常不可靠的，因为它依赖于页面的右侧ID做定义。所以，如果我有一个新的页面，ID不在我的CSS中，我的导航无法正常工作。

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

在我目前的CSS有这

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

这在我的脑海里应该工作，但事实并非如此。

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

感谢您的帮助

来源

2014-06-15 gempir

如果你想链接到一个演示（这是非常有用的），请链接到一个演示网站，如[JS小提琴]（http://jsfiddle.net/），或类似，否则只要你更正你的问题链接，显示问题，*停止显示问题*。另外，你能否展示你想要的风格的相关HTML，这使得我们的问题变得更加清晰。 –

将来会做，但将wordpress整合到jsFiddle是相当复杂的，如果我不能使用WordPress的功能，我会错过很多内容，其中有问题。 – gempir

正如浏览器所看到的HTML一样，否则你的css将无法进行预处理。 –

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

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

希望我能帮上忙。

来源

2014-06-15 11:04:41 AndroidYODA94

谢谢！我确信我已经尝试过那个，但是没关系..我想我没有成功！ – gempir

尝试使用

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

为CSS选择！

来源

2014-06-15 10:56:02

耶也可以，谢谢。李并不是100％需要。 – gempir

导航栏着色链接

回答

相关问题