0

我正在使用这样的 CSS 代码

.top_nav ul li a{ 
  color: #444; background: #111;
}
.top_nav ul li a:hover{
  color: #fff; background: #555;
}
.top_nav ul li a:active{
  color: #111; background: #fff;
}

但问题是当任何页面处于活动状态时,在导航菜单上链接的背景不会改变。该链接的背景与其他链接的背景相同。

4

3 回答 3

2

您可能正在寻找以不同颜色聚焦菜单中的活动链接。a:active不打算用于此目的的头脑。

链接仅在单击时才占用a:active状态,因此您只能在几秒钟内看到更改。您应该寻找一种不同的方式来完成它,例如为从服务器端脚本中选择的菜单项添加一个新的 css 类。

于 2012-12-12T11:17:52.480 回答
0

a:active 选择器指的是链接的活动状态,而不是您的活动页面。

http://www.w3schools.com/cssref/sel_active.asp

您必须为您当前正在查看的页面的菜单项设置一些“活动页面”类,并在您的 CSS 中引用该类。

如果您有静态 HTML 页面,您可以向导航项添加一个类来表示当前活动页面:

<li class="current">...</li>

然后将您的CSS更改为:

.top_nav ul li.current a {
  color: #111; background: #fff;
}
于 2012-12-12T11:14:38.350 回答
0

只有当您单击它时才会应用活动。像这样做:

<li><a href="" class="active">Link</a></li>

然后样式化

top_nav ul li a.active {
   color: #111;
   background: #fff;
}
于 2012-12-12T11:19:09.437 回答