我們可以經(jīng)由過(guò)程CSS3殊效來(lái)實(shí)現懸停彈出結果。這是一個(gè)有趣的工作，讓我們放棄了更多的JS。然則，很多時(shí)辰我們都忘懷了CSS2.1給我們帶來(lái)的美好結果。因為它具有很是好的瀏覽器支撐，我們可以做很多殊效以便兼容今朝所有主流瀏覽器。

在本教程中，我們將會(huì )哄騙CSS2.1屬性創(chuàng )建靈活進(jìn)步前輩的懸停殊效。

其實(shí)教程很簡(jiǎn)單：

當我們初學(xué)css的時(shí)辰，我們知道“：hover”元素只限于去除鏈接的下劃線(xiàn)罷了。

但如今、經(jīng)由過(guò)程下面的例子，我們會(huì )學(xué)到此中最有魅力的一種屬性，經(jīng)由過(guò)程它，我們可以實(shí)現更多更酷的殊效。

一個(gè)很cool的殊效就是創(chuàng )建圖像的頂部顯示題目文本，為用戶(hù)發(fā)明一些好的視覺(jué)反饋，當鼠標滑動(dòng)到圖像時(shí)顯示一些有關(guān)圖像的信息。

精明的讀者會(huì )發(fā)明這項技巧具有重大的潛力，當鼠標懸停在超鏈接時(shí)，如顯示CSS對象提示。

我們會(huì )應用這些關(guān)鍵的CSS屬性，偽類(lèi)，并偽元素來(lái)完成我們的殊效：

1、創(chuàng )建內容代碼：

CSS代碼容許我們追加（:after）或是預加（:before）內容。用于動(dòng)態(tài)內容及靜態(tài)內容（attr（）），圖像（url（））和計數內容（counter（））屬性。

鄙人面的例子里，我們將應用（attr（））函數來(lái)標識表記標幟提取顯示內容的標簽。

從上方可以看到，應用content屬性容許我們把“title”追加到內容之后。

2、美化讓其更都雅：

如今，我們要做就是調劑hover/focus的在圖像后面的地位，用CSS來(lái)實(shí)現讓他浮于圖像上方。

起首，我們須要創(chuàng )建一個(gè)list容器。首要用來(lái)斷定相對地位，并容許在這個(gè)list容器插入絕對地位的單位。

下面只代碼：

ul > li {
    position: relative;
    float: left;
    list-style: none;
    margin: 0 20px 20px 0;
    font-size: 10px;
}

添加更多樣式到（:hover），我們用CSS來(lái)定義絕對地位并賜與它高度、靠山，行間距（這個(gè)與高度雷同，所以我們定義將文本垂直居中）。

我們還可以同樣來(lái)定義（:focus），不經(jīng)由過(guò)程鼠標也能獲得更好體驗。

ul a:hover:after，
ul a:focus:after
{
    background: rgb（255，255，255）;
    bottom: 2px;
    content: attr（title）;
    color: ＃000;
    display: block;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    position: absolute;
    text-align: center;
    width: 100％;
}

我們還可以經(jīng)由過(guò)程添加（outline）屬性來(lái)給圖像創(chuàng )建一個(gè)邊框殊效。

為什么我們不消（border）屬性是因為（outline）不會(huì )影響相干對象，而（border）則會(huì )影響。

ul a:hover img， ul a:focus img { outline: 3px solid ＃ccc; }

我們如今有一個(gè)簡(jiǎn)單而有效的字幕疊加，用一些簡(jiǎn)單的CSS來(lái)創(chuàng )建有效的顯示。

3、延展到更多方面：

如今我們有一個(gè)簡(jiǎn)單的字幕覆蓋不錯，然則我們怎么樣添加一些額外的樣式，如許我們可以經(jīng)由過(guò)程添加幾行CSS來(lái)更改題目標地位？

我們將創(chuàng )建一個(gè)（.reverse）屬性來(lái)指定對象元素地位，是元素從頭定位到顯示圖像的頂部而不是底部。

ul a.reverse:hover:after，
ul a.reverse:focus:after { top: 0px; }

我們還可以創(chuàng )建一個(gè)（.offset）屬性來(lái)定義居中地位。道理是應用負距拉到中心。

ul a.offset:hover:after，
ul a.offset:focus:after { top: 50％; margin-top: -15px; }