7

Twitter Bootstrap を使用して Web アプリに取り組んでいます。.table-hoverビューの 1 つに、クラスを使用するテーブルがあります。ただし、テーブルには、残りの行が強調表示されているときに強調表示したくない特定のセルがいくつかあります。この効果を得るには、どのスタイル ルールを使用すればよいですか?

これは、私のビューテーブルがどのように編成されているかです。

<table class="table table-hover">
    <thead>
        <tr>
            <th />
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">Row Group "Heading" 1</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td rowspan="2">Row Group "Heading" 2</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
        </tr>
    </tbody>
</table>

2行にまたがるセルを、ホバーしたときに強調表示しないようにしたい。

編集：

私はこのCSSを試しました：

td.rowTitle:hover { background-color: transparent; }

残念ながら、うまくいきません。セルだけでなく、行全体が強調表示されている可能性があると思います...

4

3 に答える 3

15

ブートストラップ CSS は次のようになります。

.table-hover { 
             tbody { tr:hover td, tr:hover th 
                             { background-color: @tableBackgroundHover; } 
                        }
           }

少しの JQuery を使用すると、次のようになります。

  $('td[rowspan]').addClass('hasRowSpan');

次に、次の CSS を使用してオーバーライドできます。

tbody tr:hover td.hasRowSpan { 
          background-color: none;   /* or whatever color you want */
}
于 2012-11-29T00:22:47.487 に答える
0

これらの「ホバー」を作成するためにどの方法が使用されているかはわかりませんが、これらのセルを分離すると、ホバーに特定のルールを追加できます。したがって、これらのセルにクラス名を付けると、特定のスタイル/ホバーを設定できます。

于 2012-11-29T00:14:14.380 に答える