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>