首頁 > 網際網路

jquery基礎-滑鼠經過文字改變顏色背景

2019-12-11 09:39:36

jquery基礎-滑鼠經過文字改變顏色背景

1

開啟Dreamweaver軟體後,選擇建立html檔案


2

在body中建立幾個h3標籤,如圖


3

然後在上面的head中將jquery檔案匯入進來,如圖


4

在h3外建立一個大的div,然後對div和h3分別進行簡單修飾,對h3進行浮動後,再div建立邊框時如果不顯示顏色,對最大的div簡歷overflow:hidden;或對h3進行清除浮動


5

對文字進行簡單修飾後,如圖這樣的一個效果


6

 然後開始進行js的編寫,滑鼠經過和滑鼠離開文字所發生的種種變化,這是兩個時間,滑鼠經過時文字改變和滑鼠離開後又發生變換,滑鼠經過事件是 .mouseenter()


7

瀏覽器中預覽效果,當滑鼠經過文字h3時,文字就會發生改變,而且只能執行一次操作,無法改變


8

所以就需要一個滑鼠離開h3後,h3文字發生的變化,將文字背景顏色和文字顏色改為原來的就可以,如圖


9

這樣當滑鼠經過時,文字背景為藍色,文字顏色為白色,當滑鼠移開時,文字和背景又變換為原來的樣子。



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