網頁設計非JS用CSS實現hover顯示題目結果

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

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

其實教程很簡單：

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

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

一個很cool的殊效就是創建圖像的頂部顯示題目文本，為用戶發明一些好的視覺反饋，當鼠標滑動到圖像時顯示一些有關圖像的信息。

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

我們會應用這些關鍵的CSS屬性，偽類，并偽元素來完成我們的殊效：

1、創建內容代碼：

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

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

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

2、美化讓其更都雅：

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

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

下面只代碼：

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

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

我們還可以同樣來定義（:focus），不經由過程鼠標也能獲得更好體驗。

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％;
}

我們還可以經由過程添加（outline）屬性來給圖像創建一個邊框殊效。

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

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

我們如今有一個簡單而有效的字幕疊加，用一些簡單的CSS來創建有效的顯示。

3、延展到更多方面：

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

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

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

我們還可以創建一個（.offset）屬性來定義居中地位。道理是應用負距拉到中心。

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