快捷導(dǎo)航

CSS鼠標(biāo)響應(yīng)事件經(jīng)過、移動(dòng)、點(diǎn)擊示例介紹

更新時(shí)間：2013年09月04日 16:15:36 作者：

本文為大家介紹下CSS 鼠標(biāo)響應(yīng)事件：鼠標(biāo)經(jīng)過CSS、鼠標(biāo)移動(dòng)CSS、鼠標(biāo)點(diǎn)擊CSS以及示例，喜歡的朋友可以參考下

幾種鼠標(biāo)觸發(fā)CSS事件。
說明：
onMouseDown 按下鼠標(biāo)時(shí)觸發(fā)
onMouseOver 鼠標(biāo)經(jīng)過時(shí)觸發(fā)
onMouseUp 按下鼠標(biāo)松開鼠標(biāo)時(shí)觸發(fā)
onMouseOut 鼠標(biāo)移出時(shí)觸發(fā)
onMouseMove 鼠標(biāo)移動(dòng)時(shí)觸

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title>CSS 鼠標(biāo)響應(yīng)事件</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>鼠標(biāo)響應(yīng)事件 當(dāng)鼠標(biāo)經(jīng)過移出時(shí)切換css</h4> 
<li>onMouseDown 按下鼠標(biāo)時(shí)觸發(fā) 
<li>onMouseOver 鼠標(biāo)經(jīng)過時(shí)觸發(fā) 
<li>onMouseUp 按下鼠標(biāo)松開鼠標(biāo)時(shí)觸發(fā) 
<li>onMouseOut 鼠標(biāo)移出時(shí)觸發(fā) 
<li>onMouseMove 鼠標(biāo)移動(dòng)時(shí)觸發(fā) </li> 
</ul> 
</body> 
</html> 

復(fù)制代碼代碼如下:

 
<span style="color: red;">鼠標(biāo)經(jīng)過表格變色樣式:<br></span> 

復(fù)制代碼代碼如下:

 
<style> 
table { background-color:#000000; cursor:hand; width:100%; } 
td { 
/*設(shè)置onmouseover事件*/ 
onmouseover: expression(onmouseover=function (){this.style.borderColor ='blue';this.style.color='red';this.style.backgroundColor ='yellow'}); 
/*設(shè)置onmouseout事件*/ 
onmouseout: expression(onmouseout=function (){this.style.borderColor='';this.style.color='';this.style.backgroundColor =''}); 
background-color:#ffffff; 
} 
</style> 
控制表格隔行變色: 
簡(jiǎn)單應(yīng)用: 
<style type="text/css"> 
<!-- 
tr {background-color:expression((this.sectionRowIndex%2==0)?"#E1F1F1":"#F0F0F0")} 
--> 
高級(jí)應(yīng)用:每個(gè)單元格變色 
<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> 