javascript - jquery 多次鼠标悬停？

Question

假设我有一个带有背景图像(我的 Logo )的 div，并且我需要将此 div 与其他 4 个 div 进行切换，这些 div 是相同的图像但具有其他颜色。每个图像将在鼠标悬停时使用 jquery 效果调用，以便顺利显示，顺序为 div1,2,3,4,5，然后重新启动。

一个更简单的解释是......一个具有 5 种不同颜色背景的 Logo ，当您将鼠标移到该 Logo 上时，将显示每种背景颜色，就像您第一次通过它时它会是绿色的，但如果您再次将鼠标移到 Logo 上，它会变成蓝色，依此类推。

现在作为 javascript 和 jquery 的新手...我怎样才能实现这一目标？有人可以指导我通过一些教程或特定文章，或者给我一个片段，如果代码开始？ 我之前曾尝试问过这个问题，有人回答了一段代码，该代码将是一个变量(确切地说是一个计数器)，但我并不真正理解它是如何工作的以及如何实现它......

Answer 1

您可以简单地将 Logo 制作为具有透明度的 gif/png 并将其设置为背景，然后在这些值之间设置背景颜色 css 属性的动画(基于之前的脚本构建):

$(document).ready(function()
{
    var colours = ['blue','green','red','orange'];
    var colIndex = 0;

    $('#logo').mouseover(function()
    {
        if(colIndex > colours.length)
            colIndex = 0;

        $(this).css('backgroundColour', colours[colIndex]);
        colIndex++;
    });
});