javascript - 在每次悬停时显示不同的图像

Question

我有不同颜色的标志。我想在每个悬停图像上进行更改。默认图片为黑色，则 hover1 图片为红色，hover2 图片为黄色，hover3 图片为蓝色。然后再从黑色等开始。有任何想法吗？

感谢帮助

Answer 1

演示：http: //jsfiddle.net/FKAcs/

var logos = ["http://placekitten.com/100", "http://placekitten.com/200", "http://placekitten.com/300"];

var i = 0;

$('#logo').mouseover(function () {
    $(this).attr('src', logos[++i % logos.length]);
});

本质上，这维护了一个计数器 ( i)，该计数器在每个mouseover事件上都会增加。

根据这个计数器的值，我们在我们的logo数组中显示相应的项目。

Answer 2

试试这个：DEMO HERE

var images=['https://www.gravatar.com/avatar/8a5b9d17248e0a9b953c0d5b94a9f2cb?s=128&d=identicon&r=PG','https://www.gravatar.com/avatar/7512241adf8b7fb3e19c19c06f775ee3?s=128&d=identicon&r=PG','https://www.gravatar.com/avatar/de2ea38f6a28646832eafb034951a982?s=128&d=identicon&r=PG'];

var counter=0;
$('#box').mouseenter(function(){
 $(this).attr('src',images[counter]);
 counter++;
 if(counter==images.length) counter = 0 ;
})