首頁 > 網際網路

js如何實現滑鼠移入移出事件

2019-12-11 15:55:03

在前端開發中,我們經常使用js來實現一些前端的邏輯。也可以為頁面元素新增一些事件,來響應使用者的互動。

下面我們就來看一下怎麼實現滑鼠的移入,移出事件。

1

為了操作方便,我們這裡使用jquery來操作,所以先引入jquery指令碼庫檔案。


2

html裡,我們新增一個id為mouse的div就行了,裡面有一些顯示資訊。


3

接著我們就可以新增js事件了,通過新增mouseover事件,我們就可以實現滑鼠移進的邏輯事件了,在這裡我們為p元素設定資訊,提示滑鼠移進了。


4

同理新增mouseout事件,就是滑鼠移出的事件了。


5

執行頁面,可以看到一個div裡有一段檔案,我們嘗試把滑鼠移動到div裡。


6

移進去後,就可以看到有文字顯示出來,提示滑鼠已經移進來了。


7

滑鼠移出後,也有對應的提示。我們的程式碼正確執行了。

當然實際情況下,我們可以在滑鼠移進去時顯示一個視窗,圖片等等。滑鼠移出後,再隱藏掉這些內容。邏輯上都是一樣的實現,就看大家的需求是怎樣的了。



IT145.com E-mail:sddin#qq.com