做个友好的链接

标签：a   选择器   

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

做个友好的链接

标签：a   选择器   

原文地址：http://blog.csdn.net/u010037043/article/details/46907405