做个友好的链接

主要两点：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;
        }