Question

我是javascript和jQuery的新手。

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

除非再次徘徊，否则我希望它能留下来。我试图在2个图像之间实现循环。当您将鼠标悬停在另一个图像上并保持第二个图像时。当你再次悬停时，这次它会回到第一张图像并保持不变。

$('#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(){

    }
)

Answer 4

试试这个，这里我们使用两个图像变量并在mouseenter事件上更改图像。

var img1 = 'http://www.pizzatower.com/img/icons/Pizza-icon.png';

var img2 = 'http://danosdelivers.com/wp-content/uploads/2013/03/danos-supreme-pizza-2-256x256.jpg';

$('#bir').mouseenter(function () {
    var currentImg = $(this).attr('src');
    if(currentImg == img1)
        currentImg = img2;
    else
        currentImg = img1;
    $(this).attr('src',currentImg);
});

Here是正在运作的JSFiddle。

在悬停图像替换

4 个答案: