Re: [無名] 請教滑鼠移過圖片更換的語法

[b0339576 (<(￣︶￣)>)]

推 ych1022:-w-a目前在CSS加了.description, 選單可以做到位移~
→ ych1022:但是置換圖片還是不行,給個連結~其實是模仿這個網站的效果
→ ych1022:http://acru.jp/ 不過目前可以做到選單有錯位的效果就不錯
要像這個網站一樣的話
作法就比較複雜囉，會用到<li>這個項目符號

首先網誌描述裡的html要拿掉<img>改成這樣：
<ul>
<li id="自設名稱1"><a href="網址">文字</a></li>
<li id="自設名稱2"><a href="網址">文字</a></li>
                    ...
<li id="自設名稱6"><a href="網址">文字</a></li>
</ul>

比方說你的第一個連結是TOP，id裡面就設定成menu_top
          第二個是wedding，就設定成menu_wedding
　　　　　其他四個以此類推


然後再去樣式表設定CSS：

1. .description li{
　　display:inline;
　　text-indent: -9999px;}

因為項目符號預設是條列式的，所以要加入display:inline;讓它排成一列
然後在加入text-indent: -9999px;讓超連結中的文字搬到千里遠

2. 接著以TOP為例：

先設定TOP在一般狀態下要用哪張圖
#menu_top a{
background:url("TOP的原始圖網址") no-repeat;
}

在設定滑鼠移到TOP上時是哪張圖
#menu_top a:hover{
background: url("滑鼠移到TOP上時的圖") no-repeat;}

這在pixnet還蠻常見的，大致的作法是這樣
然後因為你有6個連結所以2這個步驟要走六次喔

--
※ 發信站 :批踢踢實業坊(ptt.cc)
◆ From: 114.27.148.159
※ 編輯: b0339576        來自: 114.27.148.159       (10/14 03:06)
推 ych1022:-w- 接近完成了~明兒在努力~晚安~*
推 ThisIsNotKFC:熱心推
推 ych1022:!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!落淚~