网站首页 语言 会计 电脑 医学 资格证 职场 文艺体育 范文

css设置鼠标事件的方法

栏目: 网页设计 / 发布于: / 人气:2.52W

习惯于使用 Windows 的用户对各种各样的鼠标样式一定不会陌生,当鼠标移动到不同的`地方时,当鼠标需要执行不同的功能时,当系统处于不同的状态时,都会使鼠标形状发生改变。下面小编给大家整理了几种鼠标触发CSS事件的代码,供大家参阅。

css设置鼠标事件的方法

说明:

onMouseDown 按下鼠标时触发

onMouseOver 鼠标经过时触发

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

onMouseOut 鼠标移出时触发

onMouseMove 鼠标移动时触

代码如下:

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

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

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

onMouseDown 按下鼠标时触发

onMouseOver 鼠标经过时触发

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

onMouseOut 鼠标移出时触发

onMouseMove 鼠标移动时触发

代码如下:

鼠标经过表格变色样式:

复制代码 代码如下:

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

td {

/*设置onmouseover事件*/

onmouseover: expression(onmouseover=function (){erColor ='blue';r='red';groundColor ='yellow'});

/*设置onmouseout事件*/

onmouseout: expression(onmouseout=function (){erColor='';r='';groundColor =''});

background-color:#ffffff;

}

控制表格隔行变色:

简单应用:

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

Tags:CSS 鼠标 设置