jQuery鼠标悬停的时候图片替换

青衣

需求：当鼠标放在按钮上的时候，按钮图片会变成另外一张图片，但鼠标离开的时候，图片恢复原本状态。
大致实现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" 
  onMouseOut="this.src='images/delete.png'">
  </body>
</html>

原文作者：祈澈姑娘
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。

[jQuery] jQuery鼠标悬停的时候图片替换

相关帖子

常用jquery右健禁止命令

uniapp 截屏扫码

uni-app 利用canvas画简单海报并保存图片

php使用GD库创建图片缩略图的方法

7种好看的鼠标点击效果

解决编辑器图片插入多次但发布后只显示一次问题

谷歌翻译修复神器

DDR4和DDR5内存区别大吗

青衣 LV4