Таблица подчеркивания HTML-таблицы при наведении, кроме первой строки (заголовка)

Все,

У меня есть ASP.NET GridView, который отображается в таблице HTML.

<table>
    <tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
    <tr><td>Data 1</td><td>Data 2</td></tr>
    <tr><td>Data 3</td><td>Data 4</td></tr>
</table>

Я хочу выделить строку при наведении курсора мыши на нее - кроме первой строки, которая является заголовком.

Я просто смачиваю голову JQuery и немного потрудился с CSS (либо CSS2, либо CSS3). Есть ли предпочтительный способ сделать это?

Может кто-нибудь дать мне отправную точку для этого?

Приветствия

Andez

Ответы

Ответ 1

Вы можете сделать это, используя спецификатор CSS :hover. Вот демонстрация:

<table>
    <tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
    <tr class = "notfirst"><td>Data 1</td><td>Data 2</td></tr>
    <tr class = "notfirst"><td>Data 3</td><td>Data 4</td></tr>
</table>

CSS

.notfirst:hover {
    background-color: red;
}

Ответ 2

Существует способ достижения желаемого поведения без отдельного разделения каждой строки. Здесь, как выделить каждую строку таблицы, кроме первой (заголовок) при наведении с помощью селекторов CSS :not и :first-child:

tr:not(:first-child):hover {
    background-color: red;
}

К сожалению, IE < 9 не поддерживает :not, поэтому для этого в кросс-браузерном режиме вы можете использовать что-то вроде этого:

tr:hover {
    background-color: red;
}
tr:first-child:hover {
    background-color: white;
}

В принципе, первое правило CSS включает все строки. Чтобы не выделять первую строку, вы переопределяете стиль его наведения, выбирая с помощью tr:first-child, а затем сохраняя ее background-color до белого (или независимо от цвета не выделенной строки).

Надеюсь, это тоже помогло!

Ответ 3

Чтобы расширить на user2458978 ответ, конечно, лучший способ сделать это - правильно скопировать таблицы.

<table>
<thead>
    <tr><th></th></tr>
</thead>
<tbody>
    <tr><td></td></tr>
    <tr><td></td></tr>
</tbody>
</table>

Тогда CSS просто

table tbody tr:hover { background-color: red; }

Здесь приведен пример jsFiddle

Ответ 4

1. Поместите заголовок tr внутри тега ad

2. Поместите тег tr внутри тега

3. Используйте следующий css

table tr:not(thead):hover {
    background-color: #B0E2FF;
}

Ответ 5

Используйте jQuery для добавления класса к родительскому элементу td (не выбирайте th)

$('td').hover(function(){
   $(this).parent().addClass('highlight');
}, function() {
   $(this).parent().removeClass('highlight');
});

Затем добавьте класс CSS

.highlight {
   background:red;
}

Ответ 6

Используйте тег TH для первой строки и выполните следующее:

th {
background-color:#fff;

}

Для всех остальных строк:

    tr:not(:first-child):hover {
    background-color:#eee;
}

или

tr:hover td {
    background-color:#eee;
}

Ответ 7

Почему не что-то вроде:

tr:first-child ~ tr { background-color:#fff; }

Ответ 8

По моему требованию я должен выделить все четные строки, кроме строки заголовка.

Следовательно, этот ответ может оказаться неприемлемым для вышеупомянутого вопроса.

Даже тогда я даю свой ответ здесь, надеясь, что кто-то еще сможет использовать мой ответ, если они столкнутся с этой страницей в поисковом поиске.

Отвечаю:

$("#tableName tr:even").not("tr:nth(0)").addClass("highlight");