CSS實現(xiàn)表格行鼠標滑過高亮顯示

2020-03-24 19:23:20

字體：大中小

來源：轉載

供稿：網友

請實現(xiàn)鼠標移到交易內容區(qū)域時，高亮當前行背景的效果。 1、建立一分標準的HTML文檔結構談到標準HTML結構，有人可能會說，嗯，用div標簽，里面再多套些li，最后用css來個float也就能排成這樣的結構了。其實真正標準的結構并不是說一定要用div來布局，而是要盡量使用語義化的HTML標簽。在HTML標簽的定義中div與span其實是兩個沒有語義的標簽，table則有數(shù)據(jù)表的語義。所以這里我們來建一張符合XHTML 1.0 Strict標準的文檔結構試試。以下為該表結構的HTML代碼：其中需要注意的是：你需要使用＜thead / 、＜tbody / 、＜tfoot / 等標簽，分別對應的含義是表頭區(qū)域，表主體內容，表底部區(qū)域。表頭區(qū)域的單元格你應該使用＜th / 而非＜td / ＜tfoot / 標簽塊應該在＜thead / 與＜tbody / 之間，否則無法通過W3C標簽驗證再給它們加上樣式： .tableList {
border:2px #666 solid;
}
.tableList td, .tableList th {
border:1px #666 solid;
padding:5px 25px;
}
.tableList tfoot td {
text-align:right;
}
.fastpayIcon {
background:transparent url(http://img.alipay.com/pimg/icon_fastpay16.gif) no-repeat scroll 5px 5px;
} 2、實現(xiàn)表格行滑過高亮背景效果現(xiàn)在我們要實現(xiàn)表格行滑過高亮效果，怎么辦？是的，用JS來幾個onmouseover和onmouseout就搞定了。不過，如果要符合WEB標準的話，其實我們更應該使用CSS的hover偽類來實現(xiàn)。我們在＜style / 部分再加上這條CSS規(guī)則試試： .tableList tbody tr {
background:#fff;
}
.tableList tbody tr:hover {
background:#eee;
} 這樣大部分標準瀏覽器都能夠實現(xiàn)這種效果了，接下來再考慮兼容性問題，為IE6寫上一段JS來實現(xiàn)這個效果吧＜!--[endif]-- 這里要注意的是：使用IE條件注釋＜!–[if lt IE 7] 來確保這段JS只會在IE7以下版本的IE瀏覽器中運行，因為對于大部分瀏覽器來說這段JS代碼是畫蛇添足的。 3、代碼兼容性測試接下來我們來在各個瀏覽器中測試下這段代碼的兼容性。測試各個版本IE兼容性建議使用IETester，然后是FF2/FF3。測試發(fā)現(xiàn)，在IE6和IE7中第一個有背景圖片的單元格無法實現(xiàn)該效果，IE8和FF則沒有此問題。經過分析原因在于 .fastpayIcon {
background:transparent url(http://img.alipay.com/pimg/icon_fastpay16.gif) no-repeat scroll 5px 5px;
}
該段CSS定義等價于： .fastpayIcon{
background-attachment: scroll;
background-color: transparent;
background-image: url(http://img.alipay.com/pimg/icon_fastpay16.gif);
background-repeat: no-repeat;
background-position: 5px 5px;
} 因為其中定義了background-color: transparent;雖然定義了透明，但是調試中發(fā)現(xiàn)IE對于td的background-color支持有BUG，當設置為transparent時，其實實現(xiàn)的是#fff的效果。解決方法就是刪掉對td的background-color定義，或者將屬性值設置為 inherit，這樣td就會從它的父元素tr中繼承這一屬性，從而實現(xiàn)效果。html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：CSS3 - @keyframes

下一篇：一款利用html5和css3動畫排列人物頭像的實例演示