css設置鼠標事件的方法

習慣於使用 Windows 的用戶對各種各樣的鼠標樣式一定不會陌生,當鼠標移動到不同的`地方時,當鼠標需要執行不同的功能時,當系統處於不同的狀態時,都會使鼠標形狀發生改變。下面小編給大家整理了幾種鼠標觸發CSS事件的代碼,供大家參閱。

css設置鼠標事件的方法

說明:

onMouseDown 按下鼠標時觸發

onMouseOver 鼠標經過時觸發

onMouseUp 按下鼠標鬆開鼠標時觸發

onMouseOut 鼠標移出時觸發

onMouseMove 鼠標移動時觸

代碼如下:

{ background-color: #00FF66; padding:100px;}

{background-color: #FF0000; padding:100px}

鼠標響應事件 當鼠標經過移出時切換css

onMouseDown 按下鼠標時觸發

onMouseOver 鼠標經過時觸發

onMouseUp 按下鼠標鬆開鼠標時觸發

onMouseOut 鼠標移出時觸發

onMouseMove 鼠標移動時觸發

代碼如下:

鼠標經過表格變色樣式:

複製代碼 代碼如下:

table { background-color:#000000; cursor:hand; width:100%; }

td {

/*設置onmouseover事件*/

onmouseover: expression(onmouseover=function (){erColor ='blue';r='red';groundColor ='yellow'});

/*設置onmouseout事件*/

onmouseout: expression(onmouseout=function (){erColor='';r='';groundColor =''});

background-color:#ffffff;

}

控制表格隔行變色:

簡單應用:

高級應用:每個單元格變色