列表組不工作（引導）

Question

正如標題所說，我試圖做一個項目，用戶可以從側面選擇一個項目並顯示信息。

雖然這看起來很簡單，但我試圖在下面鏈接的jsfiddle中進行此操作，但是因爲某些未知原因它會中斷。你不能再徘徊，它有一個黑暗的背景，我想我犯了一個簡單的錯誤，所以我做了一個模擬網站只是爲了測試這個非常裸露的信息，所以你不必經過數百行代碼。

這是jsfiddle，你可以看到沒有錯誤，但這不起作用......我想也許它只是一個錯誤，如果有的話可以指定一個修復程序？我使用bootswatch黑暗主題爲我的CSS

（忽略這只是代碼的jsfiddle使計算器快樂）

<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從#303030改變其background-color到transparent。

這允許項目後面的背景顏色顯示。在第二種情況下，即背景顏色是#222（從body元件推出）

在第一種情況下，即背景顏色是#303030（來自.panel未來） - 這意味着它是完全相同的顏色作爲相同的預徘徊a.list-group-item，所以它看起來像懸停沒有做任何事情。

但是，它確實有效。

如果您使用的顏色不同，您將不得不自己開始自定義引導程序，以獲取所需的顏色。