CSS中,我們可以使用鼠標移出背景消失的效果。這種效果可以使得我們的網頁看起來更加簡潔,不會顯得過于繁瑣。
div { background-color: blue; height: 50px; width: 100px; transition: background-color 1s; } div:hover { background-color: transparent; }
在上面的代碼中,我們首先定義了一個div元素,并為其添加了背景色、高度和寬度等樣式。同時,我們還在其樣式中添加了一個屬性transition,這個屬性使得div元素的樣式在1秒鐘內發生了變化,即背景顏色會逐漸消失。
當我們將鼠標懸浮在這個div元素上時,會發生什么呢?由于我們使用了:hover選擇器,當鼠標懸浮在元素上時,我們為該元素設置了一個透明的背景色。這樣,鼠標移出元素時,背景顏色就消失了。
這個效果不僅可以應用于div元素,也可以應用于其他任意元素,只需像上面的代碼一樣進行設置就可以了。