關於css添加按鈕事件(css鼠標點擊事件怎麼寫)

Laura 更新時間 2025年1月3日

快连VPN:速度和安全性最佳的VPN服务

免费试用了解更多

ainer">

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

代碼寫法：

<div onmouseover="&quot;this.className='over';&quot;"><div onmouseover="&quot;this.className='over';" this.id="'over';&quot;"><div onmouseover="&quot;this.style.background='url(bj.png)" no-repeat onmouseout='"…;…"'><h3>其他鼠標事件：</h3><p>onClick：鼠標單擊事件。（是指鼠標按下，然後鬆開時產生。）</p><p>onDblClick：鼠標雙擊事件。（是指鼠標快速按下，鬆開，並再次按下時產生。）</p><p><span>立即學習</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免費學習筆記（深入）</a>”；</p><p>onMouseDown：鼠標按下事件。（鼠標按下時即產生。）</p><p>onMouseUp：鼠標釋放事件。（是指鼠標從按下的狀態到彈起。）</p><p>onMouseMove：鼠標移動事件。（是指在特定元素上移動鼠標。）</p><p>onMouseOver：鼠標經過事件。（是指，當指針從外界往元素上移動時產生。）</p><p>onMouseOut：鼠標離開事件。（是指鼠標從特定元素上離開時產生。）</p><p>onLoad：載入事件。（當圖象或頁面結束載入時產生。）</p><p>onUnload：卸載事件。（當訪問者離開頁面時產生。）</p><p>onScroll：滾動條滾動事件。（當訪問者使用卷軸上移或下移時產生。）</p><h3>案例：</h3><p>將這個自定義樣式應用到圖片上，在瀏覽器中預覽到圖片變成了黑白，我們再定義一個樣式“.over”，這個樣式沒有任何內容，是空樣式，樣式表代碼如下：</p><pre class="brush:php;toolbar:false;"><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="&quot;cursor:url('圖標的地址')&quot;">系統自動給出效果</span>

登錄後複製