CSS3提供了很多鼠標懸浮效果,例如邊框、陰影、移動等等。其中,鼠標放上去邊框效果比較簡單,也比較常見。下面我們就來看看如何使用CSS3讓鼠標放上去出現邊框效果。
/*先建立一個div容器*/ <div class="border">這是一個div容器</div> /*CSS樣式*/ .border { width: 200px; height: 200px; background-color: #eee; border: 1px solid #ccc; padding: 20px; text-align: center; } /*當鼠標懸浮在div容器上時,改變邊框樣式*/ .border:hover { border: 1px solid blue; }
在上面的代碼中,我們首先建立了一個div容器,并設置了其寬度、高度、背景顏色、邊框和內邊距等屬性。接著,當鼠標懸浮在該容器上時,我們使用:hover選擇器改變了其邊框顏色。這樣,當鼠標放上去時,就會出現一個藍色的邊框。
總結來說,使用CSS3讓鼠標放上去出現邊框效果非常簡單,只需要使用:hover選擇器即可。這種效果適用于很多場景,例如在網頁中添加鏈接時,可以通過這種方式讓用戶感知到該區域是可以點擊的。