當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS鼠标响应事件经过、移动、点击示例介绍

發布時間：2024/9/21 CSS 71 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS鼠标响应事件经过、移动、点击示例介绍小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本文為大家介紹下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{ 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(οnmοuseοver=function (){this.style.borderColor ='blue';this.style.color='red';this.style.backgroundColor ='yellow'});
/*設置onmouseout事件*/
onmouseout: expression(οnmοuseοut=function (){this.style.borderColor='';this.style.color='';this.style.backgroundColor =''});
background-color:#ffffff;
}
</style>
控制表格隔行變色:
簡單應用:
<style type="text/css">

高級應用:每個單元格變色
<style type="text/css">

</style>

添加CSS文件引用:

復制代碼代碼如下:

總結

以上是生活随笔為你收集整理的CSS鼠标响应事件经过、移动、点击示例介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。