以前我們用表格來(lái)布局網(wǎng)頁(yè)時(shí),，我們都很喜歡用DW（Dreamweav）中的“鼠標(biāo)經(jīng)過(guò)圖像”，因?yàn)槟堑拇_吸引人,！但是我們也同樣發(fā)現(xiàn)這樣的一個(gè)問(wèn)題：當(dāng)網(wǎng)速不太快的時(shí)候，鼠標(biāo)經(jīng)過(guò)后的圖片還沒(méi)有下載下來(lái),，看上去很不美觀,。并且還需要一大堆的JS代碼,，還需要預(yù)載經(jīng)過(guò)圖片,。相對(duì)來(lái)說(shuō)比較麻煩！特別是對(duì)那些現(xiàn)在記事本來(lái)手工編寫(xiě)網(wǎng)頁(yè)的朋友更是煩得很,。事實(shí)上用CSS就可以解決這個(gè)問(wèn)題,，并且非常的簡(jiǎn)單，下載快,，不會(huì)出現(xiàn)鼠標(biāo)經(jīng)過(guò)后的圖片還沒(méi)有下載下來(lái)這種情況,。這個(gè)做法的原理很簡(jiǎn)單：就是用<a>標(biāo)簽的a:hover來(lái)觸發(fā)鼠標(biāo)事件，然后通過(guò)CSS來(lái)變化其背景的上下左右的位置,。下面就主要分析一下用CSS來(lái)制作“鼠標(biāo)經(jīng)過(guò)圖像”,。

XHTML代碼:

<ul id="nav">
<li id="nav1"><a href="/" mce_href="/">nav1</a></li>
<li id="nav2"><a href="/" mce_href="/">nav2</a></li>
<li id="nav3"><a href="/" mce_href="/">nav3</a></li>
<li id="nav4"><a href="/" mce_href="/">nav4</a></li>
<li id="nav5"><a href="/" mce_href="/">nav5</a></li>
</ul>

這里用一個(gè)菜單來(lái)講解，在實(shí)際運(yùn)用中我們可能會(huì)有其它方面的運(yùn)用,。這里我們看到并沒(méi)有圖片,，那是因?yàn)槲覀兊膱D片都是用CSS調(diào)用的背景，而每個(gè)LI都有一個(gè)ID,，那是因?yàn)檫@里的菜單圖片是不同的,！每個(gè)LI都有自己的菜單內(nèi)容。

好了,，現(xiàn)在需要把這個(gè)列表處理一下橫向排放：

#nav li {margin: 0; padding: 0; list-style: none; display: inline;}

我們都知道<a>標(biāo)簽不是默認(rèn)的塊級(jí)元素,，如果不是塊級(jí)元素鼠標(biāo)所感應(yīng)的熱區(qū)就不是我們所設(shè)定的長(zhǎng)寬,，而是其元素本身的大小。但CSS可以把其聲明為塊級(jí)元素,。

#nav a { float:left; padding: 34px 0 0 0; overflow: hidden; height: 50px;}

這里有一個(gè)很有意思的事,！那就是，在這一句中有沒(méi)有“display:block;”都是一樣的,。這里的“padding:34px 0 0 0;”是我們背景圖的一半高度（注：背景圖是把兩張圖片上下合在一起的圖片）但是并不是用來(lái)控制背景圖的,而是把<a>標(biāo)簽中的文字隱藏,。由于觸發(fā)動(dòng)作并且移動(dòng)位置是一樣的，所以可以集中描述移動(dòng)背影的位置,。

#nav a:hover { background-position: 0 -34px;}

這句的意思是：在#nav下的所有鏈接在鼠標(biāo)經(jīng)過(guò)時(shí)其背景向上移動(dòng)34個(gè)像素,。最后就是給菜單中的每一個(gè)鏈接加上背景圖片。

#nav1 a {width:59px;background:url(btn_nav1.jpg) top left no-repeat;}
#nav2 a {width:69px;background:url(btn_nav2.jpg) top left no-repeat;}
……

好了,，完成,，其中要注意的是：“padding:34px 0 0 0;”“#nav a:hover { background-position: 0 -34px;}” 需要根據(jù)自己的實(shí)際情況來(lái)設(shè)定值。