html - 列表组在面板内不起作用( Bootstrap )

Question

正如标题所说，我试图制作一个元素，用户可以从旁边选择一个元素并显示信息。

虽然这看起来很简单，但我尝试在下面链接的 jsfiddle 中的面板中执行此操作，但由于某些未知原因它中断了。你不能再悬停，它有一个更暗的背景，我想我犯了一个简单的错误所以我做了一个模拟网站只是为了用非常简单的信息来测试它所以你不必通过数百行代码。

这是 jsfiddle如您所见，没有错误，但这是行不通的……我在想这可能只是一个错误，如果可以，有人可以指定修复程序吗？我正在为我的 CSS 使用 bootswatch 深色主题

(忽略这只是来自 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>`

Answer 1

它正在工作。

在 :focus 和 :hover 上，a.list-group-item 正在改变它的 background-color 从 #303030 到 transparent。

这允许元素后面的背景颜色显示出来。在第二种情况下，背景颜色是 #222(来自 body 元素。)

在第一种情况下，背景颜色是 #303030(来自 .panel)——这意味着它与悬停前的颜色完全相同 a.list-group-item，所以看起来悬停没有做任何事情。

但是，它确实有效。

如果您想要不同的颜色，您将不得不自己开始自定义 bootstrap，以获得您想要的颜色。