用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）最後看下整個效果。當我們鼠標放到‘本站’這個標題上時，提示框就會顯示出來了，移開就會隱藏提示框。