CSS 鼠标响应事件,鼠标经过CSS,鼠标移动CSS,鼠标点击CSS

几种鼠标触发CSS事件。

 

说明:

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

 

<html>

<head>

<title>CSS 鼠标响应事件</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<style type="text/css">

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

.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: 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">
<!--
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" />

你可能感兴趣的:(CSS 鼠标响应事件,鼠标经过CSS,鼠标移动CSS,鼠标点击CSS)