4

如何hover每一个不同background-color？这些代码设置背景颜色正在工作：

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

但是当我添加悬停功能时，该功能将重复所有背景颜色。

我要指定一个指定颜色的元素，而不是重复所有的背景颜色

小提琴

一如既往，感谢您的帮助！

感谢大家：）

4

2 回答 2

3

这是你想要的吗？
LIVE DEMO 根据索引 0f 悬停的一个更改颜色以匹配数组位置：

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] });
          });
});

我使用的? :是三元运算符。如果你不知道逻辑是如何工作的，你可以用谷歌搜索它。

于 2013-06-01T13:42:31.853 回答
3

你应该只使用 CSS 来做到这一点，你唯一需要做的就是为它创建适当的类，然后将它们添加到你的元素中。IE：

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/

Edit2：您也可以直接通过javascript生成css类：如何在JavaScript中动态创建CSS类并应用？

于 2013-06-01T13:48:15.827 回答