电竞公司排行榜前十名
專注于網站建設和搭建網絡營銷體系
商視互聯,北京做網站公司
北京做網站,商視互聯 您的位置:網站首頁 > 商視動態 > 網頁設計 > 正文
非JS用CSS實現hover顯示標題效果
作者:商視互聯   來源:商視互聯   日期:2012/3/26 14:48:31   熱度:℃   [ 標簽:網頁設計 ]

現在,我們可以通過CSS3特效來實現懸停彈出效果。這是一個有趣的事情,讓我們放棄了更多的JS。但是,很多時候我們都忘記了CSS2.1給我們帶來的美好效果。因為它具有非常好的瀏覽器支持,我們可以做很多特效以便兼容目前所有主流瀏覽器。

在本教程中,我們將會利用CSS2.1屬性創建靈活先進的懸停特效。

其實教程很簡單:

當我們初學css的時候,我們知道“:hover”元素只限于去除鏈接的下劃線而已。

但現在、通過下面的例子,我們會學到其中最有魅力的一種屬性,通過它,我們可以實現更多更酷的特效。

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

精明的讀者會發現這項技術具有巨大的潛力,當鼠標懸停在超鏈接時,如顯示CSS工具提示。

我們會使用這些關鍵的CSS屬性,偽類,并偽元素來完成我們的特效:

1、創建內容代碼:

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

在下面的例子里,我們將使用(attr())函數來標記提取顯示內容的<a>標簽。

ul a:hover:after
{
    content: attr(title);
}
<li>
    <a href="#" title="Sunrise on the farm">
        <img src="img01.jpg" width="200" height="206" alt="Beautiful sunrise" />
    </a>
</li>

從上面可以看到,使用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; }


本文網址:
更多

电竞公司排行榜前十名 六肖王中特全年无错↙ 全天pk10最精准计划稳定版 江苏快三大小投注技巧 刷反水公式 时时彩后二四码投注 云尚娱乐云搜片 亿游国际app下载 极品美女壁纸 pk10万能倍投计算器 麻将怎么胡牌