當鼠标滑向鏈接塊時(shí)，展示懸停的效果，這種效果在很(hěn)多(duō)網站(zhàn)用到。本文要說的懸停效果是指鼠标滑向鏈接時(shí)出現的懸停效果。

首先看我做(zuò)的一個(gè)演示DEMO。

先寫HTML代碼：

HTML代碼很(hěn)簡單，由于IE浏覽器(qì)隻支持鏈接元素的:hover，文本內(nèi)容包含在标簽內(nèi)。但(dàn)是我們可(kě)以在标簽內(nèi)加和(hé)标簽。

再來(lái)看CSS，為(wèi)了在IE上(shàng)正常顯示，我們需要将列表li:a的寬度設置和(hé)ul的寬度值一樣，否則鼠标懸停效果隻能顯示在文本框內(nèi)。

#links ul{ list-style-type: none;width: 400px; margin:20px auto}

#links li {border: 1px dotted #999;border-width: 1px 0;margin: 5px 0;}

#links li a { color: #990000;display: block;font: bold 120% Arial, Helvetica, sans-serif;padding: 5px;text-decoration: none;} 

* html #links li a {width: 400px;} #links li a:hover {background: #ffffcc;} 

#links a em { color: #369;display: block;font: normal 85% Verdana, Helvetica, sans-serif;line-height:16px} 

#links a span {color: #125F15;font: normal 70% Verdana, Helvetica, sans-serif;line-height: 16px;}

這并不一定是世界上(shàng)最标準的寫法，當然你(nǐ)可(kě)能還(hái)會(huì)有(yǒu)其他的寫法來(lái)實現鼠标懸停效果。其實javascript可(kě)以做(zuò)出其他很(hěn)多(duō)很(hěn)酷的懸停效果，我們在項目中會(huì)考慮用戶的需求，根據需求提供不同的解決方案。對上(shàng)面說講的鼠标懸停效果，用純CSS來(lái)實現當然是最好的解決方案。