CSS移開就消失的樣式是現在頁面設計中非常重要的一個特效。比如我們去看淘寶或者京東的網站,很多時候他們用的就是這種特效。
這種效果的實現方法就是使用CSS3中的:hover
偽類。在實現之前我們需要定義一些基本的CSS樣式:
.box { width: 200px; height: 200px; background-color: #333; position: relative; } .tip { width: 100px; height: 50px; background-color: #fff; position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -50px; display: none; text-align: center; line-height: 50px; }
上述代碼中,我們定義了一個.box
元素作為基礎元素,以及一個.tip
元素作為提示框,我們將.tip
元素的初始狀態設置為隱藏。
.box:hover .tip { display: block; }
上述代碼中,我們使用.box:hover .tip
選擇器來表示當鼠標移動到.box
元素上時,子元素.tip
的display
屬性變為block
,從而達到提示框顯示的效果。
這就是CSS實現移開就消失的樣式的基本方法,簡單易懂。
上一篇css鼠標移上去圖片字體
下一篇css程序下載