幾種滑鼠觸發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"> |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
