-2 
<td class="td_1">nbsp;</td><td class="td_1">nbsp;</td><td class="td_1">nbsp;</td>
<td class="td_2">nbsp;</td><td class="td_2">nbsp;</td><td class="td_2">nbsp;</td>
<td class="td_3">nbsp;</td><td class="td_3">nbsp;</td><td class="td_3">nbsp;</td>
<td class="td_4">nbsp;</td><td class="td_4">nbsp;</td><td class="td_4">nbsp;</td>

マウスオーバー時に背景を＃00000に、マウスアウト時に元の色に変更するには、jqueryが必要です。これらはループで動的に生成されるため、td_100sまで上がる可能性があります。

いくつかの例を試しましたが、残念ながら、calssの名前はすべて静的であり、機能しませんでした。

td_1の上にマウスを置くと、それに応じてすべてのtd_1が影響を受けるはずです。

前もって感謝します

4

6 に答える 6

4

マウスオーバー効果のためにjQueryはまったく必要ないと思います。CSSはその仕事をします：

#table_id td {
  background: #ffffff;
 }

#table_id td:hover {
  background: #000000;
  color: #ffffff;
}

これは、テーブルにCSSのIDまたはその他のフックがあることを前提としています。

他のセル要件に対応するために大幅に更新する

さて、同じクラスのすべてのtdの色を変更したい場合は、はい、JavaScriptが必要になります。

このようなものが機能するはずです：

$('td').hover(function(){
    var thisClass = $(this).attr('class');
    $('td.' + thisClass).addClass('hovered');
}, 
   function(){
     var thisClass = $(this).attr('class');
     $('td.' + thisClass).removeClass('hovered');
 }

次にCSSで：

.hovered { background: #000000; }

私は通常、CSSで色の宣言を行うのではなく、jQueryを使用してクラスを追加/削除しようとします。通常、その方法を維持する方が簡単です。

于 2012-04-13T13:25:02.437 に答える
2

私は次のことを行います:(これらは要素<td>内にあると仮定し<table>ます）クラス「table_class」をテーブルに追加し、cssで2つのクラスを定義できます。

table.table_class td{
    background-color:#whatever;
}
table.table_class td:hover{
    background-color:#000;
}

注：このソリューションではJQueryはまったく必要ありません;）

于 2012-04-13T13:24:35.460 に答える
0

なぜ動的td行のクラス名を設定するのですか？IDを'td_1'...'td_100'に設定してみませんか？マウスオーバーしたときにクラスを変更しますか？または、css3フィルターはどうですか？

于 2012-04-13T13:21:36.810 に答える
0

行全体をホバーしても大丈夫ですか。または、このコードを変更してtd、

$("#mytable tr").mouseover(function() {$(this).addClass("over");}).mouseout(function() {$(this).removeClass("over");});
于 2012-04-13T13:23:13.727 に答える
0

あなたのCSSで、のためのクラスを作ります

td.hoverstate{background-color:#000;}

次に、jQueryで

   $("td").hover(
      function () {
        $(this).addClass("hoverstate");
      },
      function () {
        $(this).removeClass("hoverstate");
      }
    );
于 2012-04-13T13:24:36.943 に答える
0

了解しました：http ：//jsfiddle.net/hKmTU/3/。私はあなたが求めたようにそれを機能させました。ホバークラスを解析する必要があるため、chipcullenの答えは機能しません。

例：すべてのtd_1にカーソルを合わせると、クラスは「td_1hovered」になります。

次に、セレクターでthisClassを使用しようとすると、「td.td_1 hovered」になり、適切なdivが選択されません。

var thisClass = $(this).attr('class');
$('td.' + thisClass).removeClass('hovered');

becomes

var thisClass = $(this).attr('class');
thisClass = thisClass.substring(0, thisClass.indexOf(" "));
$("td." + thisClass ).removeClass('hovered');

お役に立てれば！

于 2012-04-13T18:20:30.997 に答える