DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS實現網頁表格行鼠標滑過高亮顯示
CSS實現網頁表格行鼠標滑過高亮顯示
編輯:CSS詳解     

直入正題,現在有這麼一個表格:

請實現鼠標移到交易內容區域時,高亮當前行背景的效果。

1、建立一分標准的Html文檔結構

談到標准Html結構,有人可能會說,嗯,用div標簽,裡面再多套些li,最後用CSS來個float也就能排成這樣的結構了。其實真正標准的結構並不是說一定要用div來布局,而是要盡量使用語義化的HTML標簽。在Html標簽的定義中div與span其實是兩個沒有語義的標簽,table則有數據表的語義。

所以這裡我們來建一張符合XHTML 1.0 Strict標准的文檔結構試試。以下為該表結構的Html代碼:

交易類型 交易號 收款方 金額 管理 上一頁 2 3 4 下一頁 即時到賬 20081009001                          

其中需要注意的是:

  1. 你需要使用<thead />、<tbody />、<tfoot />等標簽,分別對應的含義是表頭區域,表主體內容,表底部區域。
  2. 表頭區域的單元格你應該使用<th />而非<td />
  3. <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(/School/UploadFiles_7810/201105/20110526105645563.gif) no-repeat scroll 5px 5px;
}

2、實現表格行滑過高亮背景效果

現在我們要實現表格行滑過高亮效果,怎麼辦?是的,用JS來幾個onmouseover和onmouSEOut就搞定了。不過,如果要符合WEB標准的話,其實我們更應該使用CSS的hover偽類來實現。我們在<style />部分再加上這條CSS規則試試:
.tableList tbody tr {
background:#fff;
}
.tableList tbody tr:hover {
background:#eee;
}

這樣大部分標准浏覽器都能夠實現這種效果了,接下來再考慮兼容性問題,為IE6寫上一段JS來實現這個效果吧


<!--[endif]-->

這裡要注意的是:

使用IE條件注釋<!–[if lt IE 7]>來確保這段JS只會在IE7以下版本的IE浏覽器中運行,因為對於大部分浏覽器來說這段JS代碼是畫蛇添足的。

3、代碼兼容性測試

接下來我們來在各個浏覽器中測試下這段代碼的兼容性。測試各個版本IE兼容性建議使用IETester,然後是FF2/FF3。

測試發現,在IE6和IE7中第一個有背景圖片的單元格無法實現該效果,IE8和FF則沒有此問題。經過分析原因在於
.fastpayIcon {
background:transparent url(/School/UploadFiles_7810/201105/20110526105645563.gif) no-repeat scroll 5px 5px;
}

該段CSS定義等價於:
.fastpayIcon{
background-attachment: scroll;
background-color: transparent;
background-image: url(/School/UploadFiles_7810/201105/20110526105645563.gif);
background-repeat: no-repeat;
background-position: 5px 5px;
}

因為其中定義了background-color: transparent;雖然定義了透明,但是調試中發現IE對於td的background-color支持有BUG,當設置為transparent時,其實實現的是#fff的效果。解決方法就是刪掉對td的background-color定義,或者將屬性值設置為 inherit,這樣td就會從它的父元素tr中繼承這一屬性,從而實現效果。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved