dw怎么加鼠標移動效果

dw怎么加鼠標移動效果

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

　　dw怎么加鼠標移動效果?

　　看了dw

　　用CSS制作鼠標經過圖像

　　XHTML代碼:

　　nav1

　　nav2

　　nav3

　　nav4

　　nav5

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

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

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

　　標簽不是默認的塊級元素，如果不是塊級元素鼠標所感應的熱區就不是我們所設定的長寬，而是其元素本身的大小。但CSS可以把其聲明為塊級元素。

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

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

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