jQuery滑鼠懸停的時候圖片替換
- 2019 年 10 月 5 日
- 筆記
需求:當滑鼠放在按鈕上的時候,按鈕圖片會變成另外一張圖片,但滑鼠離開的時候,圖片恢復原本狀態。
大致實現demo是這樣的:其實就是一個滑鼠划過事件,來控制css的背景圖片的屬性。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>柱狀圖折線圖混合使用</title> </head> <style> #remove { width: 40px; height: 20px; border: none; color: #FFFFFF; background: url(images/delete.png); background-size: 100% 100%; } </style> <body> <div id="remove"></div> </body> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script type="text/javascript"> $("#remove").hover(function() { $(this).css("background-image", "url(images/delete1-1.png)"); }, function() { $(this).css("background-image", "url(images/delete.png)"); }); </script> </html>CSS滑鼠懸停的時候圖片替換
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS程式碼滑鼠經過圖片變換圖片</title> </head> <body> <img src="images/delete.png" name="picture" width="330" height="210" border="0" align="middle" onMouseOver="this.src='images/delete1-1.png'" onMouseOut="this.src='images/delete.png'"> </body> </html>