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