做個友好的鏈接

      主要兩點：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