CSS標準系列用CSS制作“鼠標經過圖像”_Web標準教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
以前我們用表格來布局網頁時,我們都很喜歡用DW(Dreamweav)中的“鼠標經過圖像”,因為那的確吸引人!但是我們也同樣發現這樣的一個問題:當網速不太快的時候,鼠標經過后的圖片還沒有下載下來,看上去很不美觀。并且還需要一大堆的JS代碼,還需要預載經過圖片。相對來說比較麻煩!非凡是對那些現在記事本來手工編寫網頁的朋友更是煩得很。
事實上用CSS就可以解決這個問題,并且非常的簡單,下載快,不會出現鼠標經過后的圖片還沒有下載下來這種情況。這個做法的原理很簡單:就是用<a>標簽的a:hover來觸發鼠標事件,然后通過CSS來變化其背景的上下左右的位置。下面就主要分析一下用CSS來制作“鼠標經過圖像”。
XHTML代碼:
示例代碼 [www.wf0088.com]
<ul id="nav">
<li id="nav1"><a href="/">nav1</a></li>
<li id="nav2"><a href="/">nav2</a></li>
<li id="nav3"><a href="/">nav3</a></li>
<li id="nav4"><a href="/">nav4</a></li>
<li id="nav5"><a href="/">nav5</a></li>
</ul>
<li id="nav1"><a href="/">nav1</a></li>
<li id="nav2"><a href="/">nav2</a></li>
<li id="nav3"><a href="/">nav3</a></li>
<li id="nav4"><a href="/">nav4</a></li>
<li id="nav5"><a href="/">nav5</a></li>
</ul>
這里用一個菜單來講解,在實際運用中我們可能會有其它方面的運用。這里我們看到并沒有圖片,那是因為我們的圖片都是用CSS調用的背景,而每個LI都有一個ID,那是因為這里的菜單圖片是不同的!每個LI都有自己的菜單內容。
好了,現在需要把這個列表處理一下橫向排放:
示例代碼 [www.wf0088.com]
#nav li {margin: 0; padding: 0; list-style: none; display: inline;}
我們都知道<a>標簽不是默認的塊級元素,假如不是塊級元素鼠標所感應的熱區就不是我們所設定的長寬,而是其元素本身的大小。但CSS可以把其聲明為塊級元素。
示例代碼 [www.wf0088.com]
#nav a { float:left; padding: 34px 0 0 0; overflow: hidden; height: 50px;}
這里有一個很有意思的事!那就是,在這一句中有沒有“display:block;”都是一樣的。這里的“padding:34px 0 0 0;”是我們背景圖的一半高度(注:背景圖是把兩張圖片上下合在一起的圖片)但是并不是用來控制背景圖的,而是把<a>標簽中的文字隱藏。由于觸發動作并且移動位置是一樣的,所以可以集中描述移動背影的位置。
示例代碼 [www.wf0088.com]
#nav a:hover { background-position: 0 -34px;}
這句的意思是:在#nav下的所有鏈接在鼠標經過時其背景向上移動34個像素。最后就是給菜單中的每一個鏈接加上背景圖片。
示例代碼 [www.wf0088.com]
#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;}
……
#nav2 a {width:69px;background:url(btn_nav2.jpg) top left no-repeat;}
……
好了,完成,其中要注重的是“#nav a:hover { background-position: 0 -34px;}” 需要根據自己的實際情況來設定值。
相關Web標準教程:
- 相關鏈接:
- 教程說明:
Web標準教程-CSS標準系列用CSS制作“鼠標經過圖像”。