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

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

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

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

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

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

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

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

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

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

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

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

2、美化讓其更都雅：

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

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

下面只代碼：

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

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

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

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）屬性是因?yàn)椋╫utline）不會(huì)影響相干對(duì)象，而（border）則會(huì)影響。

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

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

3、延展到更多方面：

如今我們有一個(gè)簡(jiǎn)單的字幕覆蓋不錯(cuò)，然則我們?cè)趺礃犹砑右恍╊~外的樣式，如許我們可以經(jīng)由過(guò)程添加幾行CSS來(lái)更改題目標(biāo)地位？

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

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

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

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