jQuery hover each different background color

Question

How to hover every different background-color? These code set the background-color is working:

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

But when I add hover function,the function will repeat all background-color.

I want to specify the elements of a specified color, not repeat all background color

The Fiddle

As always, your assistance is appreciated!

Thanks!every one:)

Roko C. Buljan · Accepted Answer · 2013-06-01T14:12:23.920

3

Is this what you want?
LIVE DEMO Depending on the index 0f the hovered one change the color to match the array position:

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

the ? : I used is a Ternary Operator. You can Goog for it if you don't know how the logic works.

edited Jun 01 '13 at 14:12

answered Jun 01 '13 at 13:42

Roko C. Buljan

196,159
39
305
313

1

Yes,Thanks, Roko ,but how change default background-color is dlHColors,not white? – MotoTony Jun 01 '13 at 13:54
because the element very strange,i don't know why can't change the css,no any !important there,after this jquery works,i'll figure out – MotoTony Jun 01 '13 at 14:01
@MotoTony sorry, I had some errors, edited my code for better! ;) – Roko C. Buljan Jun 01 '13 at 14:11
@MotoTony removed the `index()` stuff cause it was not needed once we return `index` (i) from the `each` argument – Roko C. Buljan Jun 01 '13 at 14:41

score 3 · Answer 2 · edited May 23 '17 at 12:28

You should do that with CSS only, the only thing you need to is create proper classes for it and then add them to your elements. i.e.:

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 }

Edit: minor fix and here is a fiddle: http://jsfiddle.net/CxmGp/

Edit2: you can also generate the css classes directly through javascript: How to dynamically create CSS class in JavaScript and apply?

jQuery hover each different background color

2 Answers2