onHover图像替换

Question

我是javascript和jQuery的新手。

我有一个简单的脚本，替换图像时，它与另一个悬停。我想做一个简单的改变。悬停结束后，图像将返回到第一个图像。

我希望它留下来，除非它再次悬停。我正在尝试实现两个图像之间的循环。当你悬停时，它会转到另一个图像，并停留在第二个图像中。当您再次悬停时，这一次它会返回到第一张图像，并与之保持在一起。

http://jsfiddle.net/S6pWg/

$('#bir').hover(function () {
    $(this).attr('src', 'img/2.jpg')
},

function () {
    $(this).attr('src', 'img/1.jpg')
})

Answer 1

以下是我为您提供的解决方案：http://jsfiddle.net/9JM6B/

我向图像添加了几个数据属性，所以您的所有图像只有一个jQuery代码，应该是这样的。

HTML

<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/ONE_Campaign.svg" data-alternative="http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png" data-state="0">

jQuery

$('img').on('mouseover', function() {
    if( $(this).data('state') == 0 )
    {
        $(this).data('original', $(this).attr('src'));
        $(this).attr('src', $(this).data('alternative'));
        $(this).data('state','1');
    }
    else
    {
        $(this).attr('src', $(this).data('original'));
        $(this).data('state','0');
    }
});

Answer 2

我建议使用以下代码：

var hoverStatus = 0;
    $('#imgHover').mouseenter(function () {
        if(hoverStatus == 0) {
            $(this).attr('src','http://hasslefreeliving.com/wp-content/uploads/2012/10/placeholder.gif');
            hoverStatus = 1;
        } else {
            $(this).attr('src','http://www.edrants.com/wp-content/uploads/2009/09/placeholder.jpg');
            hoverStatus = 0;
        }
    });

当然，您可以使用另一个属性，如"hoverStatus“，而不是额外的变量

JS小提琴：http://jsfiddle.net/2YcYG/

Answer 3

你需要做这样的事情

    var hoverStatus =0;


   $('#bir').hover(function(){
       if(hoverStatus ==0)
       {
            $(this).attr('src','img/2.jpg');
            hoverStatus =1;
       }
       else 
      {
           $(this).attr('src','img/1.jpg');
           hoverStatus =0;
      }
    },
    function(){

    }
)