Удалить эффект наведения таблицы для одной ячейки в таблице загрузчика Twitter

Question

Удалить эффект наведения таблицы для одной ячейки в таблице загрузчика Twitter

Я работаю над веб-приложением, используя Twitter Bootstrap. В одном из наших представлений есть таблица, которая использует класс .table-hover. Однако в таблице есть определенные ячейки,которые я не хочу выделять, когда остальные их строки выделяются. Какие правила стиля я должен использовать для достижения этого эффекта?

Примерно так организована моя таблица представлений:

<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; }

Она не сработает, к сожалению. Я думаю, что это может быть потому, что подсвечивается вся строка, а не только ячейка...

518 2

css twitter-bootstrap

2 ответов:

Comments

Ничего не найдено.

mccannf · Accepted Answer · 2012-11-29 02:22:47

Вот как выглядит css bootstrap:
.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 */
} 

Omega · Accepted Answer · 2012-11-29 02:14:14

Я не уверен, какой метод используется для создания этих "зависаний", однако вы можете добавить определенные правила для наведения, если вы отделяете эти ячейки. Поэтому дайте этим ячейкам имя класса, а затем вы можете установить для них определенные стили/Ховеры.