css 之 hover 大用途

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 塊級元素顯示便可。