接上回,新的写法.关于图片连接问题

还是先看图片



要求:实现鼠标滑过效果.

上次类似解决办法是将图片设为背景 用按钮来解决.并没有滑过效果

这次解决办法:

html:

<ul id="tgzn">
<li id="default"><a href="#">注册会员</a></li>
<li id="default"><a href="#">团购流程</a></li>
<li id="default"><a href="#">如何订购</a></li>
<li id="default"><a href="#">保障协议</a></li>
<li id="tel"><a href="#">热线:010-00000000</a></li>
</ul>

css:

#tgzn{margin-top:15px;}
#default a{background:url(../images/tg.gif) no-repeat 0 -101px; height:31px; width:157px; text-align:center; margin-left:16px; margin-top:5px;}
#default a,#tel a{font-weight:700; color:#c4180c; padding-top:9px; height:26px; width:157px; display:block; text-decoration:none;}
#default a{ font-size:14px; }
#default a:hover{background:url(../images/tg.gif) no-repeat 0 -66px; height:31px; width:157px; text-align:center; margin-left:16px; margin-top:5px;}
#default a:hover{ font-size:14px; font-weight:700; color:#fff; padding-top:9px; height:26px; width:157px; display:block; text-decoration:none;}
#tel{background:url(../images/tg.gif) no-repeat 0 -32px; height:31px; width:157px;text-align:center; margin-left:16px; margin-top:5px;}
#tel a{font-size:12px;}

感觉这样的写法更合理简单

记录一下 防止忘记