作者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