*更新說明：該文章於2009年XNUMX月首次發布。我提到的某些技術可能已過時。 請指 本指南，介紹最新的網站創建技術.
什麼是 hover? 引用的定義 UWStout.edu:
“Hover' 是將光標放在任何類型的鏈接上時發生的效果。 可以對鏈接進行編碼以響應 hover 通過改變顏色、顯示新圖形，甚至播放聲音文件。
hover effect 提高了 web 可用性並幫助 web 所有者引導他們的 web 流量。 當您希望您的網絡用戶特別注意某個特殊鏈接時，一個好的方法是創建一個具有吸引力的鏈接 hover 影響。 一個簡單的 hover 這樣的效果（簡單的下劃線和文本顏色的變化）表明這些文本是“可點擊的”並改善了網絡交互。 然而，更改文本顏色和样式（下劃線/上劃線/粗體）是非常基礎的，還有很多可以做的 hover.
在本文中，我將向您展示如何創建美觀的鏈接 hover 效果。
示例 1：鏈接 hover 按鍵
首先，看一下工作示例（將鼠標懸停在鏈接上以查看其工作方式-更改側面的圖標）。
這是將在此示例中構建的完整版本。
我們如何在純CSS中創建它？
按鈕圖像
第 1 步，如您所見，我們需要兩個不同版本的箭頭圖標。 在我們的示例中，我使用紅色 (#CC3300) 作為默認鏈接按鈕； 和灰色 (#333333) 為 hover 影響。 使用任何圖像編輯軟件都可以輕鬆製作此類按鈕。
我們現在有紅色按鈕（比方說，b1.png）和rey顏色（按鈕說，b2.png）。 將這兩個合併到一個圖像文件中，b1.png位於b2.png之上。 這將是我們鏈接的最終圖像。 將其命名（例如，x.png）並上傳所需的位置（對於我的情況，我將其放在我的WP模板文件夾中）。
供您參考：
b1.png 
，b2.png 
和x.png 
CSS代碼
接下來，關於CSS代碼。 基本上我們想要實現的是將鏈接文本稍微向右縮進，為按鈕騰出空間； 同時，在鏈接打開時顯示不同的圖像 hover 狀態。 這些都是非常基本的東西，只是我們需要對背景位置進行一些改動。 訣竅是為原始鏈接顯示圖像的頂部（紅色按鈕）； 什麼時候 hover, 用 -11 像素（您的網站上可能有所不同）邊距替換背景圖像以顯示灰色按鈕。
.xa {color：#cc3300; padding-left：14px; font-weight：bold; background-image：url（images / x.png）; background-position：0 2px; background-repeat：no-repeat; }
.xa:hover { 顏色：#333333； 左填充：14px； 字體粗細：粗體； 背景圖像：url（圖像/x.png）； 背景位置：0 -11px； 背景重複：不重複； }
執行
為了炫耀這個 hover 效果，只需將類 x 插入指定區域即可。 這是一個關於如何做到這一點的例子。
主頁
示例 2：鏈接 hover 背景
使用相同的概念，有無數種方法可以使您的鏈接看起來很酷。 這是我們可以用 hover 效果與略有不同的方法。 再一次，看看完成的版本。
在這個例子中，我要做的是創建一個按鈕式超鏈接，當用戶將鼠標放在它上面時，背景會發生變化。
我們如何在純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; }
哎：hover { 寬度：280px； 高度：42px； 顏色：#FFFFFF； 填充：10px； 字體粗細：粗體； 文字裝飾：無； 顯示：塊； 背景圖片：url（圖片/b2.png）； 背景重複：不重複； }
執行
要顯示鏈接，只需將類（y）插入源代碼的標記中。 例：
主頁
總結
我希望這篇文章能為您帶來有價值的信息，並鼓勵您以創造性的方式使用CSS。 如果您認為我應該在本指南中添加任何其他要點，請隨時將您的想法留在評論部分。
