css通過mouse事件制作變色的單元格

2012/11/26 10:46:50作者：佚名來源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例介紹】

對(duì)于長(zhǎng)時(shí)間審核大量數(shù)據(jù)、瀏覽表格的用戶來說，即使是隔行變色的表格，閱讀時(shí)間長(zhǎng)了
仍然會(huì)感到疲勞。如果數(shù)據(jù)行能夠動(dòng)態(tài)的根據(jù)鼠標(biāo)經(jīng)過來變色，就使得頁面充滿了生機(jī)，最大
程度地減少用戶疲倦。只用簡(jiǎn)單的Jayascript代碼即可實(shí)現(xiàn)。

【實(shí)例代碼】


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通過mouse事件制作變色的單元格</title>
</head>
<body>
<table width="300" border="1" cellpadding="3" cellspacing="0"
bordercolor="#efefef" bgcolor="#efefef">
  <tr> 
    <td onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'";
onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'">
北京市   　　19612368 </td>
  </tr>
  <tr> 
    <td 
onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'"; 
onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'">
天津市 　　12938224 </td>
  </tr>
  <tr>
    <td 
onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'"; 
onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'">
上海市   　　23019148 <br /></td>
  </tr>
</table>
</body>
</html>

【代碼分析】

onMouseOut="this.bgColor='#efefef'；this.borderColor=’#efefef"；設(shè)置鼠標(biāo)離開效果。
onMouseOver="this.bgColor='#cccccc'；this.borderColor='#000033'"；設(shè)置鼠標(biāo)放上去的效果。
可以修改顏色的值來改變顏色，預(yù)覽效果如圖所示。

mouse事件
【素材及源碼下載】