CSS中可以通過:hover偽類選擇器來實現鼠標經過加載圖片的效果。
首先,需要在HTML中添加顯示圖片的標簽以及對應的CSS樣式。例如,給這個標簽添加一個類名為“hover-image”的樣式:
然后,在CSS中定義該類名的樣式:
.hover-image { width: 200px; height: 200px; background-image: url(hover.jpg); background-size: cover; opacity: 0.5; transition: opacity 0.5s; }
以上代碼表示鼠標經過該標簽時,顯示的圖片將會變為“hover.jpg”,并且會有一個0.5秒的漸變動畫效果。
接下來,需要定義鼠標經過該標簽時顯示的樣式。使用:hover偽類選擇器即可。
.hover-image:hover { opacity: 1; }
以上代碼表示當鼠標經過該標簽時,將會顯示完全不透明的圖片。
通過以上CSS代碼,就可以實現鼠標經過加載圖片的效果了。