CSS Hover big use

1. When the mouse moves to the icon or text, the picture index appears in the lower right corner of the mouse?

The code is implemented as follows:

<a href="#"> click to    follow class="pic" >        <img src=". /.. /img/picter/images/card1.gif" alt=""/>    </div></a>

CSS Insert style:

       a{            position:relative;        }        . pic{            width:100px;            height:150px;            Position:absolute;            top:30px;            Display:none;        }        A:hover. pic{            display:block;        }

Comments:

First, determine relative positioning for the parent position:relative

Second, the child determines the positioning, that is, the picture needs to show the location of Position:absolute, because the child itself is a div block-level element, in order to make the mobile mouse can reach the appeal effect, so the sub-div into none;

When the mouse does not move, the picture is not displayed.

Finally, the most critical!!!

When the mouse moves to the a tag, you need to display the picter inside the Div, so you need to note that when writing: A:hover. pic, convert empty elements to block-level element display.

CSS Hover big use