Question

当一个人将鼠标悬停在导航项目上或导航项目页面处于活动状态时，我试图将我的锚文本设为白色。

目前，除文字颜色外，一切都很好。听起来很简单，但我很挣扎。

当导航项悬停在活动页面上或者是活动页面时，我希望锚文本变为白色。目前锚文本只是变成灰色，我怀疑由于那里的不透明度。

以下是我一直在使用的代码：

.dropdown ul li.current_page_item,
.dropdown ul li:hover,
.dropdown ul li.on {
    background-color: orange;
    opacity:0.4;
    color: white;   
}

可能这不是相关的代码示例，但我看不出其他什么可能很重要。我正在使用Wordpress网站，并且发现使用CSS有点棘手。以下是网站本身，如果有人认为我没有添加相关代码段：http://tinyurl.com/m562wgd

Answer 1

从color: white;规则中删除.dropdown ul li.on，然后将其添加到此新的css规则中：

.dropdown ul li:hover > a {
   color: white;
}

Answer 2

锚标记不会从其父标记继承颜色，因此您应该明确设置它：

.dropdown ul li:hover a{
    color: white;   
}

Answer 3

将css添加到li标签内的超链接

.dropdown ul li a:hover {color: white;}

Answer 4

你是对的，这是不透明的，使文字显得灰色。您获得代码的方式是对白色文本应用40％的不透明度。如果你真的想要白色，可以完全降低不透明度，或者使其值更高（0.9）。

不确定为什么要使用不透明度，但请记住并非所有浏览器都能识别不透明度 - 并显示100％白色。我相信IE8及更低版本不支持：将psovero-class悬停在任何标签上。

.dropdown ul li.current_page_item a,
.dropdown ul li a:hover,
.dropdown ul li.on a {
    background-color: orange;
    opacity:0.4;
    color: white;   
}

希望这有帮助。

悬停和活动页面样式

4 个答案: