話說之前的我的CSS紀錄

CSS,文字牽動圖形&圖形牽動文字

http://blog.pixnet.net/edastyle/post/2830257


一開始我下方本來是紅色格子,
當滑鼠到上方時候,應該變成白色格子,並且,
文字部份也會變化,但是!!!!!!!

今天我將「純色碼背景」換成「圖片連結背景」
發現很多問題,因為,

連圖片變化都出現問題,
並且文字不產生變化,



我可真是快要哭出來了,因為我可是看書學習的啊!
所以我必須要自己解決問題,


..........................................................................努力思考中

經過我1小時的不斷常識,終於解決問題,
讓圖片跟文字都可以達到正確的變化。


就直接寫上結論,

上滑鼠之前背景,背景必須用
background-image:url("http://XXXXXXXXXXXXXX");

上滑鼠之後背景,背景必須用
background:url("http://XXXXXXXXXXXXXXXXXX");

不論上滑鼠之前或是之後,
背景都不能掛上no-repeat

所以參照之前的網頁所顯示,現在貼上修改後的CSS碼

li.no1 a{/*游標未上之前圖形與文字*/
background-image:url("http://p4.p.pixnet.net/albums/userpics/4/1/152941/1172326061.gif");color:gray;text-decoration:none;}
li.no1 a:hover{/*游標上之後圖形與文字*/
background:url("http://p4.p.pixnet.net/albums/userpics/4/1/152941/1172326062.gif") ;color:white;text-decoration:none;}

li.no2 a{background-image:url("http://p4.p.pixnet.net/albums/userpics/4/1/152941/1172326056.gif");text-decoration:none;color:gray;}
li.no2 a:hover{background:url("http://p4.p.pixnet.net/albums/userpics/4/1/152941/1172326059.gif");color:white;text-decoration:none;}
li.no3 a{background-image:url("http://p4.p.pixnet.net/albums/userpics/4/1/152941/1172326112.gif");text-decoration:none;color:gray;}
li.no3 a:hover{background:url(http://p4.p.pixnet.net/albums/userpics/4/1/152941/1172326115.gif);color:white;text-decoration:none;}
li.no4 a{background-image:url("http://p4.p.pixnet.net/albums/userpics/4/1/152941/1172326079.gif");text-decoration:none;color:gray;}
li.no4 a:hover{background:url("http://p4.p.pixnet.net/albums/userpics/4/1/152941/1172326088.gif");color:white;text-decoration:none;}
li.no5 a{background-image:url("http://p4.p.pixnet.net/albums/userpics/4/1/152941/1172326106.gif");text-decoration:none;color:gray;}
li.no5 a:hover{background:url(http://p4.p.pixnet.net/albums/userpics/4/1/152941/1172326107.gif);color:white;text-decoration:none;}
li.no6 a{background-image:url("http://p4.p.pixnet.net/albums/userpics/4/1/152941/1172326097.gif");text-decoration:none;color:gray;}
li.no6 a:hover{background:url("http://p4.p.pixnet.net/albums/userpics/4/1/152941/1172326100.gif");color:white;text-decoration:none;}


至於成果,請看網頁
http://edastyle.myweb.hinet.net/kca.html
arrow
arrow
    全站熱搜

    edastyle 發表在 痞客邦 留言(0) 人氣()