Question

网页制作中鼠标点击时文字下沉效果是怎么实现的

Answer 1

当鼠标移动到链接上时，链接文本（或图片）会出现下沉的效果，好像链接的小手图标将它按下去一样。这个小效果被很多网页制作者使用，的确很实用，并能为页面增添不少生气。

最早看到这个效果的时候感到很神奇，想不到是什么这个下沉效果是利用什么原理和代码制作的，经过对别人网页源代码的“借鉴”，我终于恍然大悟——原来它是使用了“相对定位+hover伪类”让其产生位移这个简单的方法制作的！

它的效果简单，原理简单，代码更简单，如果需要将网站或某个页面的链接全部制成下沉效果，只需要在CSS加上一句即可：

a:hover {
position:relative;
top:1px;
left:1px;
}
只要将这段CSS加入到应用的CSS文件中，链接就可以在鼠标悬浮时出现下沉效果了，现在你就可以试试了。

Answer 2

设置：a:hover{ pading:2px 0px 0px 0px; display:block;}