需求：当鼠标放在按钮上的时候，按钮图片会变成另外一张图片，但鼠标离开的时候，图片恢复原本状态。
大致实现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>
