Question

我无法在悬停时找到正确的CSS语法来自定义我的导航栏链接。我的导航栏如下：

  <ul class="nav navbar-nav navbar-right">
    <li><%= link_to "Home", root_path %></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          Account | <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><%= link_to "User", current_user %></li>
          <li><%= link_to "Update", edit_user_path(current_user) %></li>
        </ul>
    <li><%= link_to "Logout", logout_path, method: "delete" %></li>

我设法通过

在下拉菜单中获得正确的悬停效果

.dropdown:hover {
background:#3b3535;
color: #ece6e6;
}

我想对我的链接“Home”和“Logout”产生同样的效果。我试过了

.navbar-nav:hover {
background:#3b3535;
color: #ece6e6;
}

但是三个链接（“主页”，“帐户”和“注销”）立即悬停。从那以后，我尝试了很多选择，包括：

.ul#navbar-nav a:hover {
background:#3b3535;
color: #ece6e6;
}

.navbar-nav ul.nav li:hover a{
background:#3b3535;
color: #ece6e6;
}

.ul.nav li a:hover {
background:#3b3535;
color: #ece6e6;
}

但它们似乎都不起作用。你能给我合适的语法来获得正确的悬停效果吗？感谢。

Answer 1

Home和Logout没有链接<a>所以只需使用以下内容定位它们。

ul.nav li:hover {
  background:#3b3535;
  color: #ece6e6;
}

并且ul不是在选择器之前有一个点的类：）

在Bootstrap下悬停时自定义导航栏颜色

1 个答案: