2

正如标题所说，我正在尝试制作一个项目，用户可以从侧面选择一个项目并显示信息。

虽然这看起来很简单，但我尝试在下面链接的 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>`
4

1 回答 1

0

这是工作。

On:focus并且:hover正在a.list-group-item将其background-color从更改#303030为transparent。

这允许项目背后的背景颜色显示出来。在第二种情况下，该背景颜色是#222（来自body元素。）

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

但是，它确实有效。

如果您追求不同的颜色，您将不得不自己开始自定义引导程序，以获得您想要的颜色。

于 2014-04-29T00:36:59.453 回答