當鼠標懸停在表格的行上面有一個高亮的背景色，這樣的表格讓人看起來就是舒服，時刻告訴用戶正在閱讀表格哪一行的數據。Bootstrap的確沒有讓你失望，他也考慮到這種效果，其提供了一個“.table-hover”類名來實現這種表格效果。
鼠標懸停高亮的表格使用也簡單，僅需要<table class="table">元素上添加類名“table-hover”即可：
<table class="table table-hover"> … </table>
效果圖如下：
從效果圖中可以看出，當你鼠標懸浮在某一單元格上時，單元格所在行的背景色都會變成淺灰色。
鼠標懸浮高亮的效果主要是通過“hover”事件來實現，設置了“tr:hover”時的th、td的背景色為新顏色。
其源碼請查看bootstrap.css文件中第1469行~第1472行：
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: #f5f5f5;
}
注：其實，鼠標懸浮高亮表格，可以和Bootstrap其他表格混合使用。簡單點說，只要你想讓你的表格具備懸浮高亮效果，你只要給這個表格添加“table-hover”類名就好了。例如，將前面介紹的幾種表格結合使用：
<table class="table table-striped table-bordered table-hover"> … </table>
在右側代碼編輯器第42行補充正確代碼，制作鼠標懸停高亮表格，如下所示：
正確代碼如下：
<table class="table table-hover"> … </table>
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報