如何在純CSS中創建與懸停圖像的鏈接

文章撰寫者:
  • 網站設計
  • 更新:2月27,2020

*更新說明:該文章於2009年XNUMX月首次發布。我提到的某些技術可能已過時。 請指 本指南,介紹最新的網站創建技術.

什麼是懸停? 引用的定義 UWStout.edu:

“懸停”是將光標放在任何類型的鏈接上時發生的效果。 可以對鏈接進行編碼,以通過更改顏色,顯示新圖形或甚至播放聲音文件來響應懸停。

懸停效果提高了網絡的可用性,並幫助網絡所有者定向其網絡流量。 當您希望網絡用戶特別關注特殊鏈接時,一個好的方法是創建一個具有有吸引力的懸停效果的鏈接。 像這樣的簡單懸停效果(簡單的下劃線和文本顏色的更改)表明這些文本是“可點擊的”並改善了網絡交互。 但是,更改文本的顏色和样式(下劃線/上劃線/粗體)是非常基本的,懸停還有很多其他事情可以做。

在本文中,我將展示如何使用懸停效果創建外觀漂亮的鏈接。

示例1:使用懸停按鈕進行鏈接

首先,看一下工作示例(將鼠標放在鏈接上以查看其工作原理 - 在側面更改圖標)。

示例1 - 與懸停按鈕圖像鏈接

這是將在此示例中構建的完整版本。

我們如何在純CSS中創建它?

按鈕圖像

如您所見,步驟1,我們需要兩個不同版本的箭頭圖標。 在我們的示例中,我使用紅色(#CC3300)作為默認鏈接按鈕; 和灰色(#333333)表示懸停效果。 使用任何圖像編輯軟件都可以輕鬆製作這樣的按鈕。

我們現在有紅色按鈕(比方說,b1.png)和rey顏色(按鈕說,b2.png)。 將這兩個合併到一個圖像文件中,b1.png位於b2.png之上。 這將是我們鏈接的最終圖像。 將其命名(例如,x.png)並上傳所需的位置(對於我的情況,我將其放在我的WP模板文件夾中)。

供您參考:

b1.png ,b2.png 和x.png

CSS代碼

接下來,關於CSS代碼。 基本上我們想要實現的是將鏈接文本稍微向右縮進以為按鈕騰出空間; 同時,當鏈接處於懸停狀態時,顯示不同的圖像。 這些都是非常基本的東西,除了我們需要對背景位置稍微扭曲一下。 訣竅是顯示原始鏈接的圖像的頂部(紅色按鈕); 當懸停時,使用-11px(可能在您的網站上有所不同)邊距替換背景圖像以顯示灰色按鈕。

.xa {color:#cc3300; padding-left:14px; font-weight:bold; background-image:url(images / x.png); background-position:0 2px; background-repeat:no-repeat; }
.xa:懸停{color:#333333; padding-left:14px; font-weight:bold; background-image:url(images / x.png); background-position:0 -11px; background-repeat:no-repeat; }

履行

要顯示此懸停效果,只需將類x插入指定區域即可。 這是一個如何做到這一點的例子。

<p class ='x'> <a href="http://www.webhostingsecretrevealed.com">主頁</a> </ p>

示例2:懸停背景中的鏈接

使用相同的概念,您可以通過無盡的方式使鏈接看起來很酷。 這是另一個關於我們如何使用稍微不同的方法處理懸停效果的示例。 再看看完成的版本。

示例2 - 懸停背景中的鏈接

在這個例子中,我要做的是創建一個按鈕式超鏈接,當用戶將鼠標放在它上面時,背景會發生變化。

我們如何在純CSS中創建它?

背景圖片

首先,創建兩個圓角矩形圖像。 出於演示目的,我們不會在此示例中合併這兩個圖像。 我們將紅色(#CC3300)矩形命名為b1.png; 和栗色(#9F2800)矩形為b2.png。

CSS代碼

接下來,這是樣式表的代碼(我們在第二個示例中命名了類'y')。

ay {width:280px; 身高:42px; 顏色:#000000; 填充:10px; 文字修飾:無; 顯示:塊; font-weight:bold; background-image:url(images / b1.png); background-repeat:no-repeat; }
ay:hover {width:280px; 身高:42px; 顏色:#FFFFFF; 填充:10px; font-weight:bold; 文字修飾:無; 顯示:塊; background-image:url(images / b2.png); background-repeat:no-repeat; }

履行

要顯示鏈接,只需將類(y)插入源代碼中的<a href>標記即可。 例:

<a href="http://www.webhostingsecretrevealed.com" class="y">主頁</a>

總結

我希望這篇文章能為您帶來有價值的信息,並鼓勵您以創造性的方式使用CSS。 如果您認為我應該在本指南中添加任何其他要點,請隨時將您的想法留在評論部分。

關於Jerry Low

WebHostingSecretRevealed.net(WHSR)的創始人 - 100,000用戶信任和使用的託管評論。 超過15在網絡託管,聯盟營銷和SEO方面的多年經驗。 ProBlogger.net,Business.com,SocialMediaToday.com等的貢獻者。