Make a friendly link

Main two points: a. Give the picture hint according to the specific link; b. Move the mouse to the link to appear the specific content prompt;

1. Add a picture to a link

This is mainly applied to the CSS property selector e[attr$= "value", which represents the element E that owns the property attr, and the property value ends with value. Give me a chestnut:

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

A element that represents the value of the href at the end of ". zip", such as the following a element meets the requirements.

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

This allows us to match a variety of links that end up with. pdf,. png,. xlsx, and so on. In fact, if you have very few links, you can also directly control the class name.

2. Move the mouse over the connection to bring up specific tips

The main use: hover selector. Hide the cue box first, and the prompt box appears when you move the mouse over the connection.

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

Pop-up tips box is drawn see http://blog.csdn.net/u010037043/article/details/45642267

Demo Stamp: http://runjs.cn/detail/bjnel1xx

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Make a friendly link