Make a friendly Link

Make a friendly Link

Two main points: a. Give an image prompt based on the specific link; B. Move the mouse over the link and a specific content prompt appears;

1. Add images to links

The attribute selector E [attr $ = "value"] of css is used to indicate the element E that owns the attribute attr and ends with the attribute value. Example:

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

Indicates the element whose href value ends with ". zip". For example, the following a element meets the requirements.

<A href = "http://www.aabbcc.zip"> download compressed files </a>

In this case, we can match various links ending with .hangzhou.png).xlsx. In fact, if you have few links, you can directly control them by class name.

2. Move the mouse over the connection and a prompt is displayed.

Mainly used: hover selector. First, hide the prompt box. When you move the mouse over the connection, the prompt box is displayed.

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

The drawing of the pop-up tips box is shown in the http://blog.csdn.net/u010037043/article/details/45642267

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

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.