用CSS製作滑鼠經過映像

css|滑鼠

以前我們用表格來布局網頁時，我們都很喜歡用DW（Dreamweav）中的“滑鼠經過映像”，因為那的確吸引人！但是我們也同樣發現這樣的一個問題：當網速不太快的時候，滑鼠經過後的圖片還沒有下載下來，看上去很不美觀。並且還需要一大堆的JS代碼，還需要預載經過圖片。相對來說比較麻煩！特別是對那些現在記事本來手工編寫網頁的朋友更是煩得很。事實上用CSS就可以解決這個問題，並且非常的簡單，下載快，不會出現滑鼠經過後的圖片還沒有下載下來這種情況。這個做法的原理很簡單：就是用<a>標籤的a:hover來觸發滑鼠事件，然後通過CSS來變化其背景的上下左右的位置。下面就主要分析一下用CSS來製作“滑鼠經過映像”。

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>

這裡用一個菜單來講解，在實際運用中我們可能會有其它方面的運用。這裡我們看到並沒有圖片，那是因為我們的圖片都是用CSS調用的背景，而每個LI都有一個ID，那是因為這裡的菜單圖片是不同的！每個LI都有自己的菜單內容。

好了，現在需要把這個列表處理一下橫向排放：

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

我們都知道<a>標籤不是預設的區塊層級元素，如果不是區塊層級元素滑鼠所感應的熱區就不是我們所設定的長寬，而是其元素本身的大小。但CSS可以把其聲明為區塊層級元素。

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

這裡有一個很有意思的事！那就是，在這一句中有沒有“display:block;”都是一樣的。這裡的“padding:34px 0 0 0;”是我們背景圖的一半高度（註：背景圖是把兩張圖片上下合在一起的圖片）但是並不是用來控制背景圖的,而是把<a>標籤中的文字隱藏。由於觸發動作並且移動位置是一樣的，所以可以集中描述移動背影的位置。

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

這句的意思是：在#nav下的所有連結在滑鼠經過時其背景向上移動34個像素。最後就是給菜單中的每一個連結加上背景圖片。

#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;}” 需要根據自己的實際情況來設定值。