Html 列表组在面板内不工作(引导)

Html 列表组在面板内不工作(引导),html,css,twitter-bootstrap,twitter-bootstrap-3,bootswatch,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,Bootswatch,正如标题所说,我试图制作一个项目,用户可以从侧面选择一个项目,然后显示信息 虽然这看起来很简单,但我试着在一个面板内这样做,就像下面链接的JSFIDLE中一样,但不知为什么它会断开。你不能再悬停,它有一个较暗的背景,我想我犯了一个简单的错误,所以我制作了一个模拟网站,只是为了用非常简单的信息来测试它,这样你就不必经过数百行代码 这是你可以看到的,没有错误,但这不起作用。。。我在想也许这只是一个bug,如果是的话,有人能指定一个修复程序吗?我正在为我的css使用bootswatch darkly主

正如标题所说,我试图制作一个项目,用户可以从侧面选择一个项目,然后显示信息

虽然这看起来很简单,但我试着在一个面板内这样做,就像下面链接的JSFIDLE中一样,但不知为什么它会断开。你不能再悬停,它有一个较暗的背景,我想我犯了一个简单的错误,所以我制作了一个模拟网站,只是为了用非常简单的信息来测试它,这样你就不必经过数百行代码

这是你可以看到的,没有错误,但这不起作用。。。我在想也许这只是一个bug,如果是的话,有人能指定一个修复程序吗?我正在为我的css使用bootswatch darkly主题

忽略这一点,只需从jsfiddle中编写代码即可使stackoverflow愉快

    <div class="row">
  <div class="col-md-6">
    <h1>This doesn't work!</h1>
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">Panel primary</h3>
      </div>
      <div class="panel-body">
        <div class="list-group">
          <a href="#" class="list-group-item active">
            Cras justo odio
          </a>
          <a href="#" class="list-group-item">
            Dapibus ac facilisis in
          </a>
          <a href="#" class="list-group-item">
            Morbi leo risus
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
  <h1>This does work!</h1>
    <div class="list-group">
      <a href="#" class="list-group-item active">
        Cras justo odio
      </a>
      <a href="#" class="list-group-item">
        Dapibus ac facilisis in
      </a>
      <a href="#" class="list-group-item">
        Morbi leo risus
      </a>
    </div>
  </div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
此外,实际的链接是可点击的,在这两种情况下都可以工作,只是没有悬停效果

修复很简单,正如我所想:

`<style type="text/css">
a.list-group-item:hover {
  background-color: red;
}
</style>`
它正在工作

开:聚焦和:悬停a.list-group-item正在将其背景色从303030更改为透明

这允许项目后面的背景色显示出来。在第二种情况下,该背景颜色来自主体元素

在第一种情况下,背景颜色是303030,来自.panel,这意味着它与预先悬停的a.list-group-item的颜色完全相同,因此看起来悬停没有做任何事情

然而,它确实有效


如果你想要一种不同的颜色,你必须自己开始定制引导程序,以获得你想要的颜色。

Ahh我尝试使用另一个类。hover1:hover{background color:blue;}只是为了测试,但这不起作用,所以我认为这是一个bug,感谢这些信息,我现在就去测试它,要么标记为完整,要么再次评论。a、 列表组项:hover{background color:red;}修复了它,感谢为未来的人更新的帖子。