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）

1 个答案: