用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)最後看下整個效果。當我們鼠標放到‘本站’這個標題上時,提示框就會顯示出來了,移開就會隱藏提示框。
-
SQL SERVER如何創建數據庫關係圖
數據庫的關係圖可以讓表的關係可視化,通過關係圖,我們可以直觀的分析表和表之間是一對多關係還是多對一關係。下面小編來給大家演示如何在SQLSERVER中創建數據庫關係圖。操作方法(01)首先打開SQLSERVER的管理工具,找到要操作的數據庫,然後展開文件夾,選擇數據庫關係圖...
-
÷除號怎麼打出來
在工作中常常會使用到除號做文件,那麼除號應該怎麼打出來呢?請看下面解析。操作方法(01)方法一:打開word文檔,點擊“插入”》“符號”。(02)點擊“÷”號即可。(03)方法二:在輸入法裏打“÷”即可。...
-
簡單幾步打造圖片的繪畫玻璃效果
怎麼製作圖片的繪畫玻璃效果呢?下面,就讓小編給大家介紹一下吧。操作方法01首先,我們需要打開我們電腦的ps軟件(鼠標左鍵雙擊桌面上的ps快捷方式或者是鼠標右鍵再選擇打開都是可以的)。02打開ps軟件之後,打開一張圖片。03接着,我們複製背景圖層。04添加高斯模糊濾鏡效...
-
excel打印區域怎麼設置
MicrosoftExcel是微軟公司的辦公軟件Microsoftoffice的組件之一,是由Microsoft為Windows和AppleMacintosh操作系統的電腦而編寫和運行的一款試算表軟件。操作方法(01)打開Excel文件後將鼠標移動到頁面佈局選框點擊頁邊距按鈕。(02)在頁面設置的小窗口中勾選自己所需...