在css中,可以使用「:hover」偽類選擇器和background屬性實現滑鼠懸浮改變圖片的效果,語法為「圖片元素:hover{background:url(滑鼠懸浮後顯示圖片的路徑);}」。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
css滑鼠懸浮改變圖片
在CSS中使用:hover 偽類可以達到這個效果,:hover 選擇器用於選擇滑鼠指標浮動在上面的元素。
提示::hover 選擇器可用於所有元素,不只是連結。
提示::link 選擇器設定指向未被訪問頁面的鏈接的樣式,:visited 選擇器用於設定指向已被訪問的頁面的鏈接,:active 選擇器用於活動鏈接。
註解:在 CSS 定義中,:hover 必須位於 :link 和 :visited 之後(如果存在的話),這樣樣式才能生效。
下面我們透過範例來看一下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style type="text/css"> div{ width:350px; height:250px; background:url(1118.01.png); } div:hover{ background:url(1118.02.png); }/*鼠标经过*/ </style> <body> <div> </div> </body> </html>
當滑鼠未放在圖片上時,輸出結果如下:
當當滑鼠放在圖片上時,輸出結果如下:
由此便完成了滑鼠懸浮改變圖片。
更多程式相關知識,請造訪:程式設計影片! !
以上是css怎麼實現滑鼠懸浮改變圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章!