Question

我认为Bootstrap非常难以理解并使用CSS覆盖规则覆盖（我真的不想创建自己的自定义Bootstrap CSS，因为它实际上并不是非常灵活，只需要一个小的改动我们从LESS源代码重建一个新版本的Bootstrap。

我想要的只是简单，当悬停在链接（在导航栏中）时，将其背景更改为我自己的颜色，而不是丑陋默认颜色Bootstrap集。因此，即使我为链接元素定义了Id，CSS规则仍然无法正常工作。

＆＃13;

li#li#li#li#li#li#li#li:hover {
   background-color:red!important;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="navbar" id="menu">
    <ul class="nav navbar-nav">
        <li id="li"><a href="#">Test</a></li>
    </ul>
  </div>

＆＃13;

正如您所看到的那样，即使使用CSS规则，也无法覆盖它？或者我在悬停时改变背景的实际元素是错的（我认为它实际上应该是li元素）？

我也想知道是否有人可以通过Bootstrap如何让这种魔法发生来向我解释。我想在我自己的CSS插件中应用相同的魔法，在某些情况下它可能会有所帮助。

Answer 1

它是获得该背景的a链接元素

#li:hover a {
   background-color:red;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="navbar" id="menu">
    <ul class="nav navbar-nav">
        <li id="li"><a href="#">Test</a></li>
    </ul>
  </div>

悬停时无法更改li背景（在bootstrap导航栏中）？

1 个答案: