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

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

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

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

　　看了dw

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

　　XHTML代碼:

　　nav1

　　nav2

　　nav3

　　nav4

　　nav5

　　這里用一個(gè)菜單來講解，在實(shí)際運(yùn)用中可能會(huì)有其它方面的運(yùn)用。這里看到并沒有圖片，那是因?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;}

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

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

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

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

　　這句的意思是：在#nav下的所有鏈接在鼠標(biāo)經(jīng)過時(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í)際情況來設(shè)定值。