List group not working inside panel (Bootstrap)

Question

As the title says, I was trying to make a project where the user can select an item from the side and info shows up.

Although this seems really simple, I tried doing this inside a panel like in the jsfiddle linked below but for some unknown reason it breaks. You can no longer hover and it has a darker background, I figured I made a simple mistake so I made a mock up site just to test this with very bare information so you didn't have to go through hundreds of lines of code.

Here is is jsfiddle as you can see there is no mistakes yet this doesn't work... I was thinking maybe its just a bug and if so could someone specify a fix? I'm using bootswatch darkly theme for my css

(Ignore this just code from jsfiddle to make stackoverflow happy)

    <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 -->

also the actual links are clickable and work in both cases just no hover effect

Fix was simple as I thought it would be:

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

Answer 1

It is working.

On :focus and :hover the a.list-group-item is changing its background-color from #303030 to transparent.

This allows the background colour behind the item to show through. In the second case, that background colour is #222 (coming from body element.)

In the first case, that background colour is #303030 (coming from .panel) -- which means it is exactly the same colour as the pre-hovered a.list-group-item, so it looks like the hover isn't doing anything.

However, it does work.

If you're after a different colour, you're going to have to start customising bootstrap yourself, to get the colours you want.