當前位置：軟件學堂 > 資訊首頁 > 網絡編程 > DIV+CSS > css通過mouse事件制作變色的單元格

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

2012/11/26 10:46:50作者：佚名來源：網絡

移動端

【實例介紹】

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

對于長時間審核大量數據、瀏覽表格的用戶來說，即使是隔行變色的表格，閱讀時間長了
仍然會感到疲勞。如果數據行能夠動態的根據鼠標經過來變色，就使得頁面充滿了生機，最大
程度地減少用戶疲倦。只用簡單的Jayascript代碼即可實現。

【實例代碼】


<!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"；設置鼠標離開效果。
onMouseOver="this.bgColor='#cccccc'；this.borderColor='#000033'"；設置鼠標放上去的效果。
可以修改顏色的值來改變顏色，預覽效果如圖所示。

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

請點擊：通過mouse事件制作變色的單元格下載本實例相關素材及源碼

標簽： mouse

上一篇：css實現隔行換色的斑馬紋表格
下一篇：表單中的元素

相關文章

熱門軟件/ 推薦游戲/ 手機軟件

資訊分類

Dreamweaver Flash DIV+CSS 編程其他

推薦教程

精品軟件推薦

360安全衛士

訊飛輸入法

欧美一级一极性活片免费观看,欧美一级艳片欧美精品,欧美一级性爱大片,欧美一级囗交视频视频,欧美一级特黄录像视频