CSS鼠标响应事件经过、移动、点击示例介绍
字体：[ ] 类型：转载 时间：
本文为大家介绍下CSS 鼠标响应事件：鼠标经过CSS、鼠标移动CSS、鼠标点击CSS以及示例，喜欢的朋友可以参考下
几种鼠标触发CSS事件。 说明： onMouseDown 按下鼠标时触发 onMouseOver 鼠标经过时触发 onMouseUp 按下鼠标松开鼠标时触发 onMouseOut 鼠标移出时触发 onMouseMove 鼠标移动时触
代码如下: &html& &head& &title&CSS 鼠标响应事件&/title& &meta http-equiv="Content-Type" content="text/ charset=gb2312"& &style type="text/css"& .Off{ background-color: #00FF66; padding:100} .up{background-color: #FF0000; padding:100px} &/style& &/head& &body& &ul class=Off onMouseOut="this.className='Off'" onMouseOver="this.className='Up'"& &h4&鼠标响应事件 当鼠标经过移出时切换css&/h4& &li&onMouseDown 按下鼠标时触发 &li&onMouseOver 鼠标经过时触发 &li&onMouseUp 按下鼠标松开鼠标时触发 &li&onMouseOut 鼠标移出时触发 &li&onMouseMove 鼠标移动时触发 &/li& &/ul& &/body& &/html&
代码如下: &span style="color:"&鼠标经过表格变色样式:&br&&/span&
代码如下: &style& table { background-color:#000000; cursor: width:100%; } td { /*设置onmouseover事件*/ onmouseover: expression(onmouseover=function (){this.style.borderColor ='blue';this.style.color='red';this.style.backgroundColor ='yellow'}); /*设置onmouseout事件*/ onmouseout: expression(onmouseout=function (){this.style.borderColor='';this.style.color='';this.style.backgroundColor =''}); background-color:# } &/style& 控制表格隔行变色: 简单应用: &style type="text/css"& &!-- tr {background-color:expression((this.sectionRowIndex%2==0)?"#E1F1F1":"#F0F0F0")} --& 高级应用:每个单元格变色 &style type="text/css"& &!-- tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")} td {background-color:expression((this.cellIndex%2==0)?"":((this.parentElement.sectionRowIndex%2==0)?"green":"yellow"))} --& &/style&
添加CSS文件引用:
代码如下: &link id="cssStyle" rel="stylesheet" type="text/css" href="../style.css" /&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具君，已阅读到文档的结尾了呢~~
系统管理篇2010版(60)管理,系统,工程,2010版,系统工程,60篇
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
系统管理篇2010版(60)
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer-4.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口2011年 总版技术专家分年内排行榜第三2010年 总版技术专家分年内排行榜第三
2012年 总版技术专家分年内排行榜第五
本帖子已过去太久远了，不再提供回复功能。