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