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

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

其實教程很簡單：

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

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

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

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

我們會應(yīng)用這些關(guān)鍵的CSS屬性，偽類，并偽元素來完成我們的殊效：

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

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

鄙人面的例子里，我們將應(yīng)用（attr（））函數(shù)來標(biāo)識表記標(biāo)幟提取顯示內(nèi)容的標(biāo)簽。

從上方可以看到，應(yīng)用content屬性容許我們把“title”追加到內(nèi)容之后。

2、美化讓其更都雅：

如今，我們要做就是調(diào)劑hover/focus的在圖像后面的地位，用CSS來實現(xiàn)讓他浮于圖像上方。

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

下面只代碼：

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

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

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

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)由過程添加（outline）屬性來給圖像創(chuàng)建一個邊框殊效。

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

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

我們?nèi)缃裼幸粋€簡單而有效的字幕疊加，用一些簡單的CSS來創(chuàng)建有效的顯示。

3、延展到更多方面：

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

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

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

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

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