CSS 鼠标响应事件，鼠标经过CSS，鼠标移动CSS，鼠标点击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 鼠标移动时触发 

<span style="color: red;">鼠标经过表格变色样式:<br>span>

<style>
  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;
  }
  style>
控制表格隔行变色:
    简单应用:
        <style type="text/css">

    高级应用:每个单元格变色
        <style type="text/css">

style>
添加CSS文件引用:
<link id="cssStyle" rel="stylesheet" type="text/css" href="../style.css" />