作者b0339576 (<(￣︶￣)>)
看板Blog
標題Re: [無名] 請教滑鼠移過圖片更換的語法
時間Fri Oct 14 03:05:48 2011
1F：推 ych1022:-w-a目前在CSS加了.description, 選單可以做到位移~ 10/14 02:19
2F：→ ych1022:但是置換圖片還是不行,給個連結~其實是模仿這個網站的效果 10/14 02:19
要像這個網站一樣的話
作法就比較複雜囉，會用到<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)
4F：推 ych1022:-w- 接近完成了~明兒在努力~晚安~* 10/14 04:19
5F：推 ThisIsNotKFC:熱心推 10/14 13:39
6F：推 ych1022:!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!落淚~ 10/14 20:10