用JS+CSS實現鼠標懸停顯示提示框
我們在瀏覽網頁時，經常會看到有一些提示信息是在鼠標放上去后，才顯示出來的。這個功能如何做的？下面我們來看下。
操作方法
-
01
首先，我們寫上對應的HTML，一個顯示標題，和標題的提示信息。
-
02
頁面運行的初始效果如圖，還比較粗糙的。
-
03
我們為內容添加CSS樣式，
為tips的父容器添加樣式：position: relative;
tips添加樣式： position: absolute;
這樣主要是為了讓懸停的顯示提示框好定位。
再為提示信息添加一些美化樣式，代碼如圖。 -
04
接著是定義sj樣式內容，這個主要是用css來顯示一個三角形。
-
05
再看下現在頁面效果，顯示效果已經比較好了。
-
06
由于我們的提示框需要鼠標懸停的時候才顯示出來，所以我們需要為樣式添加樣式：display: none; 這樣初始就不顯示這個提示框了。
-
07
在添加腳本事件前，我們需要先引入Jquery腳本插件，因為JS代碼里有用這個插件。
-
08
然后添加腳本事件，我們為h2標題添加mouseover，mouseout事件，就是鼠標懸停在上面時，顯示出提示框，鼠標離開時，隱藏提示框，代碼如圖。
-
09
最后看下整個效果。當我們鼠標放到‘搜狗指南’這個標題上時，提示框就會顯示出來了，移開就會隱藏提示框。
- End
- 發表于 2017-12-06 00:00
- 閱讀 ( 1362 )
- 分類：電腦網絡
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章