Question

我有以下内容：

<!DOCTYPE html>
 <html lang="en">
 <head>
 <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
 <link href="css/bootstrap.css" rel="stylesheet">
 <!-- The one below is a custom style sheet that should override -->
 <link href="css/sb-admin.css" rel="stylesheet">
 </head>  
 <body>
    <ul class="nav navbar-nav side-nav" id="side_step">
       <li><a href="#">Text</a></li>
    </ul>
 </body>
 </html>

我正在尝试在悬停时定位列表项。在bootstrap.css文件中，我有以下内容

.navbar-nav > li:hover {
    background:#08f !important;
}

但它不起作用。奇怪的是，当我检查firebug中的元素时，它说bootstrap文件正确地将以下样式分配给同一个元素...只是没有悬停

.navbar-nav > li {
   float:left;
   background:linear-gradient(to bottom, #f8f8f8, #e8e8e8);
   background:-webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#e8e8e8));
   background:-moz-linear-gradient(top, #f8f8f8, #e8e8e8);
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#e8e8e8');
   color:#090127;
   margin-top:6px;
   border:solid 1px #ddd;
}

sb-admin.css文件应覆盖bootstrap.css中规定的规则，但似乎与此无关。在sb-admin.css我有

#side_step li:hover {
   background:#08f !important;
}

可以找到一个工作示例here

Answer 1

背景在锚点上。

.navbar-nav > li:hover > a {
   background:#08f;
}

使用Bootstrap覆盖CSS规则

1 个答案: