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

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/

Edit2: JavaScript を介して直接 CSS クラスを生成することもできます: JavaScript で CSS クラスを動的に作成して適用する方法は?

于 2013-06-01T13:48:15.827 に答える
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 に答える