純CSS實現鼠標懸停提示的方法（CSS小白第三期）

標懸停提示是指當鼠標懸停在某一元素上時瀏覽器彈出的黃色小文本框，一般開發者大多會結合Javascript創建各式各樣的自定義提示，其實通過CSS定位也可以實現，首先我們看一下效果圖：

接下來我們詳細介紹它的實現方法：

首先創建一個簡單的帶鏈接的HTML（根據自己的需要），在鏈接顯示的文本后面添加需要提示的內容并置于span標簽中（加粗部分）
<p>
<a href="www.laosiji.com" style="text-decoration:none">www.你懂的.com<span>(未滿18周歲請勿點擊)</span></a> is a Horror Movies Website.
</p>
接下來是關鍵部分，先將鏈接的position屬性設置為relative,因為<a>是<span>的父級元素，這樣接下來才可以讓<span>中的提示內容根據<a>中的鏈接文本進行絕對定位。<span>中的提示內容我們不希望它一開始就顯示出來，所以要將它的display屬性設置為none.
a{position:relative;}
a span{display:none;}
當鼠標懸停在鏈接上時我們希望顯示出span中的提示內容，這時就需要將span的display屬性設置為block，為了讓其出現在鏈接的右下方，需要將span的position屬性設置為absolute，并設置一定的距離（頂部1em,左邊2em).
a{position:relative;}
a span{display:none;}
a:hover span{display:block;
position:absolute;top:1em;left:2em;}
前兩步基已經完成了本次案例的主體，剩下的就是給span添加一些樣式，讓它看起來更像是提示。可以添加一些內邊距邊框和背景顏色等。
<style type="text/css">
a{position:relative;}
a span{display:none;}
a:hover span{display:block;
position:absolute;top:1em;left:2em;
width:160px;
padding:0.2em 0.6em;
border:1px solid #996633;
background-color:#FFFF66;
color:red;}
</style>
PS:最后科普一下display:none與visible:hidden的區別
display:none ---不為被隱藏的對象保留其物理空間，即該對象在頁面上徹底消失，通俗來說就是看不見也摸不到。
visible:hidden--- 使對象在網頁上不可見，但該對象在網頁上所占的空間沒有改變，通俗來說就是看不見但摸得到。

SS懸停效果,鼠標移上去的時候，中間出現一條切線，然后消失。將內容區分成左右兩邊，效果如下：

代碼：

html：

css：

家好，今天給大家介紹一款，css3實現的鼠標懸停特效，鼠標懸停給圖片加邊框html頁面前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

圖1

鼠標放在圖像上，圖像后面的邊框就會上浮包住圖像（圖2）

圖2

源碼完整，需要的朋友可以下載學習（圖3）

圖3

本源碼編碼：10191，需要的朋友，訪問下面鏈接后，搜索10191，即可獲取。

「鏈接」

在線咨詢

上一篇：「例」一個標準完整的Html網頁版面制作「213」
下一篇：當HTML頁面加載就觸發點擊a標簽

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

純CSS實現鼠標懸停提示的方法（CSS小白第三期）

家好，今天給大家介紹一款，css3實現的鼠標懸停特效，鼠標懸停給圖片加邊框html頁面前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

鼠標放在圖像上，圖像后面的邊框就會上浮包住圖像（圖2）

源碼完整，需要的朋友可以下載學習（圖3）

本源碼編碼：10191，需要的朋友，訪問下面鏈接后，搜索10191，即可獲取。

「鏈接」

您的項目需求