css bootstrap 在列表中使用 active <li>

Question

我的样式表中有以下悬停效果

ul.nav li:hover {
background:blue;
}

当我将鼠标悬停在链接上时，它具有将栏的部分变成蓝色的预期效果。这是模板(我使用的是 rails/bootstrap):

  <ul class="nav navbar-nav navbar-right">
    <li><%= link_to "Home", root_path %></li>
    <li><%= link_to "Log in", login_path %></li>
    <li><%= link_to "Sign up", signup_path %></li>
  </ul>

我现在希望在链接处于事件状态时栏的部分保持蓝色。我正在尝试在 css 中使用“事件”功能并尝试了以下两种语法

ul.nav li:hover li:active{
background:blue;
}

或者通过在我的样式表中添加一个新的单独段落

ul.nav li:active {
background:blue;
}

两者都失败了。谁知道它为什么会失败以及我如何才能获得预期的效果？

编辑

我刚刚解决了这个错误。如果我完全删除悬停效果并将其替换为

ul.nav li:active {
background:blue;
}

该部分仅在单击期间(几毫秒)变蓝，然后恢复正常状态。所以 :active 本身似乎在我的样式表中不起作用。任何其他依赖项都可以解释这个问题吗？

Answer 1

你应该尝试:

ul.nav li:hover,ul.nav li:active {
    background:blue;
}

代替

ul.nav li:hover li:active {
    background:blue;
}

你错过了一个逗号，这改变了完整的 css 规则

演示:http://jsfiddle.net/lotusgodkk/GCu2D/824/

截图: