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

2019-11-20 22:20:13

字體：大中小

供稿：網(wǎng)友

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

復(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)過移出時切換css</h4> 
<li>onMouseDown 按下鼠標(biāo)時觸發(fā) 
<li>onMouseOver 鼠標(biāo)經(jīng)過時觸發(fā) 
<li>onMouseUp 按下鼠標(biāo)松開鼠標(biāo)時觸發(fā) 
<li>onMouseOut 鼠標(biāo)移出時觸發(fā) 
<li>onMouseMove 鼠標(biāo)移動時觸發(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> 
控制表格隔行變色: 
簡單應(yīng)用: 
<style type="text/css"> 
<!-- 
tr {background-color:expression((this.sectionRowIndex%2==0)?"#E1F1F1":"#F0F0F0")} 
--> 
高級應(yīng)用:每個單元格變色 
<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> 