-1

1 つのクラスを持つ 3 つの div 要素があり、そのうちの 1 つをホバリングすると、内側の要素の背景を赤に変更したいとします。次のように、各要素に ID を追加しようとしました。

<div class="content"><div class="yellow_hover"></div></div>
<div class="content"><div class="yellow_hover"></div></div>
<div class="content"><div class="yellow_hover"></div></div>

Jクエリ

$('.content').each(function(i, div) {
div.id="div" + (i+1);
});

結果

<div class="content" id="div1"></div>
<div class="content" id="div2"></div>
<div class="content" id="div3"></div>

今、私はこのようなものが必要です、ええ、私は知っています...私は迷っています:

$(div+i).hover(function() {
   $('.yellow_hover').css('background-color','#FF9900');
});
4

4 に答える 4

3

これには js は必要ありません。css で次のルールを設定します。

.content:hover .yellow_hover {
  background-color: #FF9900;
}

Jsフィドル

于 2014-10-17T09:26:05.883 に答える
1

divに追加する必要はなくid、そのコードを削除します。ホバリングのために以下のコードを試してください

$('.content').hover(function() {
   $(this).find('.yellow_hover').css('background-color','#FF9900');
}, function(){
   $(this).find('.yellow_hover').css('background-color','#FFFFFF');
});

デモ

于 2014-10-17T09:27:20.847 に答える
1

要素に「yellow_box」のようなクラスを与えます

Jクエリ

$(".yellow_box").hover(
  function() {
    $( this ).addClass( "yellow_hover" );
  }, function() {
   $( this ).removeClass( "yellow_hover" );
 }
);

div をホバーすると、クラス (yellow_hover) が追加されます

詳細については、jquery のドキュメントを参照してください http://api.jquery.com/hover/

于 2014-10-17T09:30:01.593 に答える
0

JS では、次のようにする必要があります。

$('body').on('hover','[id^="div"]',function() {
   $('[id^="div"]').removeAttr( "background-color" );
   $(this).css('background-color','#FF9900');
});
于 2014-10-17T09:29:10.680 に答える