網站導航往往具有rollove效果：當用戶將滑鼠滑過功能表按鈕時一個新的按鈕圖片顯示，創造一個突出的效果。為了實現這個效果，可以使用基於圖像的導航，你需要使用兩個圖像和JavaScript 。
解決方案
使用CSS來建立您的導航比使用圖像，更容易達到具有吸引力的rollove效果。CSS rollove是使用hover偽類來創建的，同樣的，您也需要設置鏈結偽類。
就拿上述列表的導航為例，添加以下規則，以建立一個rollover效果：
圖4.8顯示了當滑鼠滑過第一個功能表時功能表的樣子。
Figure 4.8. The CSS navigation showing a rollover effect
|
Hover Here? Hover There!
在Mozilla和Internet Explorer 7中，您可以套用：hover偽類於任何你喜歡的元素，但在Internet Explorer 6及以下，您僅可以在連接中套用它。舊版本的Internet Explorer只允許錨文本點擊，因為連結沒有擴大到填補其容器（在這種情況下列表目可以）。 這意味著用戶是被迫實際上點擊文字，而不是在紅色的背景下去選擇功能表項。 其中一個解決這個問題的方法，是使用CSS hack(針對不同的流覽器寫不同的CSS code的過程，就叫CSS hack,)，可擴大連接的寬度，但只應用在Internet Explorer版本6及更早的流覽器。規則操作如下： |
我們將在第7章覆蓋跨流覽器技術中有更詳細的介紹。
討 論
使用CSS非常容易達到這個效果。您可以為重風格的連接創建hover狀態，就像您為標準的連接創建的一樣。在這個例子中，我只是簡單地改變了背景顏色，使其和左邊框一樣; 然而，你可以改變背景、文字和邊框顏色，為您的導航創造有趣的效果。
推薦給同仁
您想要瞭解更多的免費小竅門以便提升你的網站排名嗎？
請馬上聯繫我們網站管理員:
MSN: chenlinwu@cmmail.com
Email: info@rank-ad.com
