0

ロールオーバーされるものに応じて、個別のdivの背景を変更しようとしています

JavaScript:

            $( "#topBar" ).hover(function() {
                    $(this).animate({backgroundColor: '#c7ce95' }, 600);
                }
            );

            $( "#topBar" ).mouseout(function() {
                 $(this).css('background', 'rgba(0, 0, 0, 0.7)');
            });

html

<div style="position:absolute; top:0; left:0; width:213px; height:20px;  display:block; float:left; color:#fff; padding:10px; background: rgba(0, 0, 0, 0.7); "  id="topBar" >test </div>
<div style="position:absolute; top:0; left:0; width:213px; height:20px;  display:block; float:left; color:#fff; padding:10px; background: rgba(0, 0, 0, 0.7); "  id="topBar" >test </div>

私は2つの問題を抱えています:

  1. ロールアウトが機能していません。
  2. 同じIDを使用しているため、これを1でしか機能させることができません..そして、IDを変更してjqueryを複製することは最善の方法ではないと思います.ページ。

http://jsfiddle.net/zwbKC/

4

1 に答える 1

0

複数の要素に対して同じ操作を実行したい場合は、class代わりに同じものを指定する必要があります。idそうするか、すべての要素を ID topBar のコンテナーにラップし、topBar の子に対して jQuery 操作を実行します。

于 2013-09-19T19:27:29.663 に答える