Question

在悬停时替换图像我使用了jquery：

<script  type='text/javascript'>

            $(document).ready(function(){

                var blog1 = $(".blogimage1").attr('src');


                $(".imghover").hover(function() {
                    $(this).attr("src","images/imghover.png");
                        }, function() {
                    $(this).attr("src",blog1);
                });
            });

        </script>

这是html：

<a href="blog-inner.html" title="read more">
                <img src="images/blogpost4.jpg" alt="blog post title" class="img-responsive imghover blogimage1">   
            </a>

它的工作方式与我想要的完全一样，但是我不知道会有多少博客图片，所以现在我必须在blogimage1，blogImage2等中添加到html中并使用jquery执行相同操作。有没有办法可以做到这一点，而不必存储每个原始的博客图像，并写一百万次相同的功能？

Answer 1

试一试：当鼠标悬停时，您可以将先前的图像保存在blog1变量中，并在鼠标离开时将其替换回来。

$(document).ready(function(){
   var blog1 = '';

  $(".imghover").hover(function() {
       //save previous image in variable
       blog1  = $(this).attr('src');
       $(this).attr("src","images/imghover.png");
     }, function() {
          $(this).attr("src",blog1);
  });
});

Answer 2

使用.data()存储原始图片路径。

存储与匹配元素关联的任意数据，或者在指定数据存储中返回匹配元素集中第一个元素的值。

码

$(".imghover").hover(function() {
    $(this).data('orgimage', this.src); //Store data
    this.src = "images/imghover.png";
}, function() {
    this.src = $(this).data('orgimage'); //Retrieve and set original image path
});

jquery悬停后恢复原始图像更好的方法？

2 个答案: