CSS鼠標響應事件經過、移動、點擊示例介紹

2019-11-20 22:20:13

字體：大中小

來源：轉載

供稿：網友

幾種鼠標觸發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> 