CSS的hover屬性可以實現鼠標移上去圖片和字體的效果。我們可以使用以下代碼來實現:
img:hover { opacity: 0.7; transition: opacity 0.5s ease; } p:hover { color: #f44336; cursor: pointer; }
上面代碼中,我們使用了hover選擇器來選擇圖片和段落。當鼠標移上去圖片時,opacity屬性將變?yōu)?.7,讓圖片變暗,并且使用了transition屬性來讓這個過渡變得更加平滑。當鼠標移上去段落時,顏色屬性將變?yōu)?f44336,這是一個類似于鮮艷的紅色,讓字體變得更加醒目。同時,我們也設置了cursor屬性來讓鼠標變成手指,讓用戶知道這里能夠進行點擊操作。
其它一些常見的hover操作還包括改變背景顏色、文字框陰影和旋轉效果等等。使用hover屬性可以方便地增強用戶體驗,讓頁面互動更加豐富。
上一篇css空格怎么看
下一篇css移開就消失的樣式