關於css新增按鈕事件(css滑鼠點擊事件怎麼寫)

ainer\">

我們在很多時候其實是需要在網頁中設定滑鼠效果的，有些是自動生成的，例如一個link鏈接，那麼滑鼠移上去自動會變成一個手的樣子去點擊，有時候一個input輸入框，那麼滑鼠就自動變成一個英文大寫I的樣子，那麼我們是否可以將更多物件設定成我們需要的樣子呢？這完全是可以的，接下來就看下效果吧

程式碼寫法：

<div onmouseover=\"this.className=\'over\';\"><div onmouseover=\"this.className=\'over\'; this.id=\'over\';\"><div onmouseover=\"this.style.background=\'url(bj.png) no-repeat\';\" onmouseout=\"…;…\">

其他滑鼠事件：

onClick：滑鼠點選事件。（是指滑鼠按下，然後放開時產生。）

onDblClick：滑鼠雙擊事件。（是指滑鼠快速按下，放開，並再次按下時產生。）

onMouseDown：滑鼠按下事件。（滑鼠按下時即產生。）

onMouseUp：滑鼠釋放事件。（是指滑鼠從按下的狀態到彈起。）

onMouseMove：滑鼠移動事件。（是指在特定元素上移動滑鼠。）

onMouseOver：滑鼠經過事件。（是指，當指標從外界往元素上移動時產生。）

onMouseOut：滑鼠離開事件。（是指滑鼠從特定元素離開時產生。）

onLoad：載入事件。（當圖像或頁面結束載入時產生。）

onUnload：卸載事件。（當訪客離開頁面時產生。）

onScroll：滾動條滾動事件。（當訪客使用捲軸上移或下移時產生。）

案例：

將這個自訂樣式應用到圖片上，在瀏覽器中預覽到圖片變成了黑白，我們再定義一個樣式“.over”，這個樣式沒有任何內容，是空樣式，樣式表程式碼如下：

<style type=\"text/css\">  .over {}.out {filter: Gray}</style>

然後在圖片標記（IMG）裡加上“onMouseOver=”this.className='over\'” onMouseOut=”this.className='out\'””，意思是當滑鼠經過時，圖片為over樣式，即彩色正常圖象；當滑鼠離開時，圖片為out樣式，即黑白影像。oMouseOver和onMouseOut是滑鼠事件，this.className=”…”表示目前物件的class名稱為…，注意大小寫不要寫錯，JS對大小寫非常敏感。

這樣這個效果就完成了，保存後在瀏覽器裡打開，圖像是黑白的，當滑鼠移上去時，圖象變成彩色，滑鼠離開時，圖象又變回黑白。只要發揮你的想像，透過this.className方法還可以做出很多好看的滑鼠效果。

滑鼠指標：

<span style=\"cursor:crosshair\">十字</span><span style=\"cursor:text\" >文本光标</span><span style=\"cursor:wait\" >等待</span><span style=\"cursor:default\" >默认</span><span style=\"cursor:help\" >问号</span><span style=\"cursor:e-resize\" >左右箭头</span><span style=\"cursor:s-resize\" >上下箭头</span><span style=\"cursor:auto\" >系统自动给出效果</span><span style=\"cursor:url(\'图标的地址\')\" >系统自动给出效果</span>

CSS定義和用法

:hover 選擇器用於選擇滑鼠指標浮動在上面的元素。

提示：:hover 選擇器可用於所有元素，不只是連結。

提示：:link 選擇器設定指向未被訪問頁面的鏈接的樣式，:visited 選擇器用於設定指向已被訪問的頁面的鏈接，:active 選擇器用於活動鏈接。

註解：在 CSS 定義中，:hover 必須位於 :link 和 :visited 之後（如果存在的話），這樣樣式才能生效。

以上是關於css新增按鈕事件(css滑鼠點擊事件怎麼寫)的詳細內容。更多資訊請關注PHP中文網其他相關文章！