1.當鼠標移動至圖標或者文字時，鼠標右下角出現圖片索引？

代碼實現如下：

<a href="#">點擊關註
    <div class="pic">
        <img src="../../img/picter/images/card1.gif" alt=""/>
    </div></a>

CSS插入樣式：

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

註釋：

首先，給父級確定相對定位 position：relative

其次 ，子級確定決定定位，即圖片需要展示的位置 position：absolute，由於子級本身是一個div塊級元素，為了使移動鼠標可以達到上訴效果，故將子級div轉變為none;

當鼠標不移動時，圖片不顯示。

最後，最關鍵！！！

當鼠標移動至 a 標簽，需要顯示的是 div裏面的 picter ,故書寫時需註意： a:hover .pic ,將空元素轉變為 block 塊級元素顯示即可。

css 之 hover 大用途