网页设计 百分网手机站

css设置鼠标事件的方法

时间:2020-09-03 20:06:34 网页设计 我要投稿

css设置鼠标事件的方法

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

css设置鼠标事件的方法

  说明:

  onMouseDown 按下鼠标时触发

  onMouseOver 鼠标经过时触发

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

  onMouseOut 鼠标移出时触发

  onMouseMove 鼠标移动时触

  代码如下:

  .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(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:#ffffff;

  }

  控制表格隔行变色:

  简单应用:

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

【css设置鼠标事件的方法】相关文章:

Dreamweaver表格边框设置的css语法大全07-29

提高鼠标反应速度的方法10-04

鼠标常见故障处理方法10-05

电脑鼠标突然失灵的解决方法10-04

电脑wifi设置方法09-30

电脑找不到鼠标的解决方法10-08

PPT设置表格样式的方法09-23

Linux系统的文件设置方法08-27

电脑鼠标关机后发光问题的解决方法10-03

鼠标的常见故障及解决方法10-05