在每个悬停上显示不同的图像

Question

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

感谢您的帮助

Answer 1

DEMO： 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 ;
})