做个友好的链接

主要两点：a.根据具体的链接给出图片提示；b.鼠标移至链接上出现具体的内容提示；

1.给链接添加图片

这里主要运用到css的属性选择器E[attr$="value"]，表示拥有属性attr，且属性值以value结尾的元素E。举个栗子：

a[href$=".zip"]
        {
            background-image:url("img/zip1.png");
        }

表示href的值以".zip"结尾的a元素,比如下面这个a元素就符合要求。

<a href="http://www.aabbcc.zip">下载压缩文件</a>

这样我们就可以匹配出以.pdf、.png、.xlsx等各种结尾的链接啦。其实如果你的链接很少，你也可以直接通过类名来控制。

2.鼠标移至连接上，弹出具体提示

主要用到了:hover选择器。首先将提示框隐藏，当鼠标移至连接上时，将提示框显示。

span{
        visibility: hidden;
        }
a[href$=".zip"]:hover .tips{
	visibility: visible;
        }

弹出的tips框的绘制见http://blog.csdn.net/u010037043/article/details/45642267

demo戳：http://runjs.cn/detail/bjnel1xx

版权声明：本文为博主原创文章，未经博主允许不得转载。