html鼠标滑动响应 CSS鼠标响应事件经过 移动 点击示例介绍

几种鼠标触发CSS事件。

说明：

onMouseDown 按下鼠标时触发

onMouseOver 鼠标经过时触发

onMouseUp 按下鼠标松开鼠标时触发

onMouseOut 鼠标移出时触发

onMouseMove 鼠标移动时触

代码如下:

CSS 鼠标响应事件

.Off{ background-color: #00FF66; padding:100px;}

.up{background-color: #FF0000; padding:100px}

鼠标响应事件 当鼠标经过移出时切换css

onMouseDown 按下鼠标时触发onMouseOver 鼠标经过时触发onMouseUp 按下鼠标松开鼠标时触发onMouseOut 鼠标移出时触发onMouseMove 鼠标移动时触发

代码如下:

鼠标经过表格变色样式:

代码如下:

table { background-color:#000000; cursor:hand; width:100%; }

td {

/*设置onmouseover事件*/

onmouseover: expression(οnmοuseοver=function (){this.style.borderColor ='blue';this.style.color='red';this.style.backgroundColor ='yellow'});

/*设置onmouseout事件*/

onmouseout: expression(οnmοuseοut=function (){this.style.borderColor='';this.style.color='';this.style.backgroundColor =''});

background-color:#ffffff;

}

控制表格隔行变色:

简单应用:

高级应用:每个单元格变色

添加CSS文件引用:

代码如下: