龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > div+css/html >

如何实现超链接类似按钮陷下的

时间:2012-12-29 08:41来源:未知 作者:admin 点击:
分享到:
超链接的hover状态,通常可以改变颜色,增加或去除下划线等效果来提醒访客。我们也看到过有一些文字链接,当鼠标移上去时(hover状态)产生位移,类似于按钮陷下的效果,这该如何
  
  超链接的hover状态,通常可以改变颜色,增加或去除下划线等效果来提醒访客。我们也看到过有一些文字链接,当鼠标移上去时(hover状态)产生位移,类似于按钮陷下的效果,这该如何实现呢?
  其实是应用了position属性,关于此属性,可以参考这里。
  图片的按钮陷下效果制作原理是一样的。我们看下面的代码:
position: relative; top:1px; left:1px;
  这段代码的含义为,相对定位,距上部位移1象素,距左部位移1象素。我们可以将上面的代码加入到超链接的hover状态中,就实现了类似按钮陷下的效果。
  我们看下面的实例:
Source Code to Run [www.fun52.com]
www.fun52.com
www.fun52.com
   [ 可先修改部分代码 再运行查看效果 ]
 


精彩图集

赞助商链接