您好,登錄后才能下訂單哦!
小編這次要給大家分享的是如何使用JavaScript鼠標(biāo)懸停事件,文章內(nèi)容豐富,感興趣的小伙伴可以來了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。
鼠標(biāo)懸停事件是當(dāng)鼠標(biāo)的光標(biāo)與其名稱表示的元素重疊時觸發(fā)的事件,本篇文章我們就來詳細(xì)介紹一下JavaScript中鼠標(biāo)懸停事件的用法。
我們先來看一下什么是onmouseover?
鼠標(biāo)懸停的活動是“事件”,而onmouseover是事件處理程序。
事件處理程序是指定事件發(fā)生時要執(zhí)行的進(jìn)程所必需的。
所以onmouseover是一個事件處理程序,負(fù)責(zé)當(dāng)鼠標(biāo)的光標(biāo)懸停在某個元素上時完成的處理。
什么是onmouseleave?
除了onmouseover之外,還有onmouseleave。
顧名思義,它處理當(dāng)鼠標(biāo)光標(biāo)離開某個元素時觸發(fā)的事件。
在下面的示例中將使用這兩個屬性,我們來看鼠標(biāo)懸停事件的使用代碼
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body> <div id="div1" onmouseover="over(this)" onmouseleave="leave(this)"></div> </body> <script> function over(x) { x.style.backgroundColor = "blue"; } function leave(x) { x.style.backgroundColor = "red"; } </script> </html>
在上面的代碼中,我們首先使用div標(biāo)簽創(chuàng)建了一個簡單的正方形。
方塊的背景顏色指定為淺粉色。
然后,我們使用HTML事件屬性注冊事件處理程序。
如代碼所示,onmouseover屬性和onmouseleave屬性已添加到div標(biāo)記的代碼中。
onmouseover屬性指定了當(dāng)鼠標(biāo)光標(biāo)在方塊上時激活的over函數(shù)。
onmouseover="over(this)"
在over函數(shù)的參數(shù)中,這表明div元素本身是over函數(shù)的參數(shù)。
over函數(shù)訪問div元素的style.backgroundColor屬性,并將方塊的背景顏色設(shè)置為藍(lán)色。
為onmouseleave屬性指定leave函數(shù)。
與over函數(shù)一樣,leave函數(shù)也可以訪問div元素的style.backgroundColor屬性,并將方形背景顏色設(shè)置為紅色。
通過這樣做,原來粉紅色的正方形在將光標(biāo)放在正方形時變成藍(lán)色,在從正方形移開時變成紅色。
看完這篇關(guān)于如何使用JavaScript鼠標(biāo)懸停事件的文章,如果覺得文章內(nèi)容寫得不錯的話,可以把它分享出去給更多人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。