請教滑鼠移過圖片更換的語法 - 部落格

要像這個網站一樣的話
作法就比較複雜囉，會用到<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)