jQuery hover每个不同的背景颜色

Question

如何在鼠标悬停时更改不同的背景颜色？ 以下代码可更改背景颜色：

var dlcabgColors = [
    'rgb(233, 147, 26)', 'rgb(22, 145, 190)', 'rgb(22, 107, 162)' , 'rgb(27, 54, 71)'
];

var i = 0;
$('.abc').each(function() {
    $(this).css('background-color', dlcabgColors[i]);
    i = (i + 1) % dlcabgColors.length;
});

但是当我添加了hover功能后，函数会重复所有背景颜色。

我希望指定特定颜色的元素，而不是重复所有背景颜色。 这里有个示例 一如既往的感谢您的帮助！

谢谢大家 :)

- MotoTony

Answer 1

这是你想要的吗？
演示 根据鼠标悬停在的元素索引位置，改变颜色以匹配数组位置：

var dlC = [
    'rgb(233, 147, 26)',
    'rgb(22, 145, 190)',
    'rgb(22, 107, 162)',
    'rgb(27, 54, 71)'
];
var dlH= [
    '#000',                    /* only difference... why that? */
    'rgb(22, 145, 190)',
    'rgb(22, 107, 162)',
    'rgb(27, 54, 71)'
];

$('.abc').each(function( i ) {
   $(this).css({backgroundColor : dlC[i] })
          .on("mouseenter mouseleave",function( e ) {
              $(this).css({backgroundColor : e.type=="mouseenter" ? dlH[i] : dlC[i] });
          });
});

? :是我所使用的三元运算符。如果您不知道该逻辑如何工作，可以在Google上搜索了解。

- Roko C. Buljan

---

是的，谢谢，Roko，但如何更改默认的背景颜色是dlHColors，而不是白色？ - MotoTony

因为该元素非常奇怪，我不知道为什么无法更改CSS，没有任何!important属性，等这个jQuery代码运行完后，我会找出原因。 - MotoTony

@MotoTony 抱歉，我有一些错误，已经修改了我的代码以获得更好的效果！;) - Roko C. Buljan

@MotoTony移除了index()的内容，因为一旦我们从each参数返回index(i)，它就不再需要了。 - Roko C. Buljan

Answer 2

您应该仅使用CSS来完成此操作，您需要做的唯一事情是为其创建适当的类，然后将它们添加到您的元素中。例如：

var totalColors = 4;

$('.abc').each(function(i, e) {
    $(this).addClass("color"+i%totalColors);
});

.color1:hover { background: #0FF }
.color2:hover { background: #FF0 }
.color3:hover { background: #0F0 }
.color0:hover { background: #F00 }

编辑：进行了小修复，这里是一个示例：http://jsfiddle.net/CxmGp/

编辑2：你也可以直接通过JavaScript生成CSS类：如何在JavaScript中动态创建CSS类并应用？

- fmsf