dw怎么加鼠標(biāo)移動效果

dw怎么加鼠標(biāo)移動效果

　　DW是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。下面是學(xué)習(xí)啦小編帶來的關(guān)于dw怎么加鼠標(biāo)移動效果的內(nèi)容，歡迎閱讀!

　　dw怎么加鼠標(biāo)移動效果?

　　看了dw

　　用CSS制作鼠標(biāo)經(jīng)過圖像

　　XHTML代碼:

　　nav1

　　nav2

　　nav3

　　nav4

　　nav5

　　這里用一個菜單來講解，在實際運用中可能會有其它方面的運用。這里看到并沒有圖片，那是因為圖片都是用CSS調(diào)用的背景，而每個LI都有一個ID，那是因為這里的菜單圖片是不同的!每個LI都有自己的菜單內(nèi)容。

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

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

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

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

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

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

　　這句的意思是：在#nav下的所有鏈接在鼠標(biāo)經(jīng)過時其背景向上移動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;}” 需要根據(jù)自己的實際情況來設(shè)定值。