滑鼠移入顯示圖片案例
阿新 • • 發佈：2019-02-19
一.需要的效果
1）.未移入前
2）.滑鼠移入後
3）.滑鼠移出
二.實現程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> a { position: relative; } a img{ display: none; position:absolute; left: 50%; margin-left: -60px; margin-top: -2px; } a:hover img{ display: block; } </style> <body> <a href="" class="text-muted"> <span>寵物之家</span><br /> <img src="img/pet_04.jpg" alt="寵物之家" width="130px"/> </a> </body> </html>