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

代碼：

html：

css：

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

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

1. 首先創建一個簡單的帶鏈接的HTML（根據自己的需要），在鏈接顯示的文本后面添加需要提示的內容并置于span標簽中（加粗部分）

   <p>
   

   <a href="www.laosiji.com" style="text-decoration:none">www.你懂的.com<span>(未滿18周歲請勿點擊)</span></a> is a Horror Movies Website.

   </p>

2. 接下來是關鍵部分，先將鏈接的position屬性設置為relative,因為<a>是<span>的父級元素，這樣接下來才可以讓<span>中的提示內容根據<a>中的鏈接文本進行絕對定位。<span>中的提示內容我們不希望它一開始就顯示出來，所以要將它的display屬性設置為none.

   a{position:relative;}
   

   a span{display:none;}

3. 當鼠標懸停在鏈接上時我們希望顯示出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;}

4. 前兩步基已經完成了本次案例的主體，剩下的就是給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--- 使對象在網頁上不可見，但該對象在網頁上所占的空間沒有改變，通俗來說就是看不見但摸得到。

停第一步，先上效果圖

這個其實是一個bootstrap實現的響應式導航，我們今兒要做的了其實是鼠標hover效果，看到那些個Home、About us...底下的三個小點點沒有，這個就是一個sex的效果，鼠標移上會有仨點點，而這仨點點呢又不是一下子出來的，是從中間點點往兩邊散開 形成三個

好了上代碼，html導航的結構就不用多說了把，ul li，相信你可以的

這里呢看到好多類是不是，因為用的是bootstrap的結構寫的，平時靜態的話其實不用那么復雜

結構不多說，主要說下下面點點的實現，我們得用上：before，當然也有：：before，其實一個冒號跟兩個冒號沒有本質的區別，都是表示在什么什么之前，他這么寫主要只是為了區分css2和css3，也就是ie和主流瀏覽器。雙冒號的話貌似只兼容火狐谷歌等，不考慮ie。

然后呢 我們需要這個before先再內容下面用定位實現一個點點，然后用css3的文字陰影去實現兩邊的點點

自行理解哈，若有疑問可去142991222找小姐姐我

好了 上完整的代碼

至于我樣張圖上的效果，請聽下回分解。哈哈哈，或者你來逼供也行142991222