Ответ 1
Используйте : not(), : first-child и :. последний ребенок
#myTable tr:not(:first-child):hover td:not(:last-child) {
background: #dfdfdf;
}
Также см. этот пример.
CSS
#MyTable tr+tr:hover {
background: #dfdfdf;
}
HTML
<table id="myTable">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>X</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>X</td>
</tr>
</table>
Мне удалось навести строки 2 и 3, но пока наведите курсор на 2 и 3, как я могу пропустить td (X). Предпочтительно не использовать селектор jQuery.
Используйте : not(), : first-child и :. последний ребенок
#myTable tr:not(:first-child):hover td:not(:last-child) {
background: #dfdfdf;
}
Также см. этот пример.
Если вы хотите не применять что-то к первому и последнему детям, вы можете использовать селектора :first-child
и :last-child
для переопределения стилей.
#MyTable tr, tr:hover {
background: #dfdfdf;
}
#MyTable tr:first-child, tr:last-child {
background: #000;
}
Это не будет работать в IE до тех пор, пока IE 9, хотя.
Я нашел эту ссылку SO, потому что я не хотел, чтобы моя строка заголовка выделялась, когда я зависала над ней. Я решил использовать теги <thead>
и <tbody>
и применить css к строкам внутри <tbody>
.
<style>
.report tbody tr:hover {
background-color: khaki;
}
</style>
<table class="report">
<thead>
<tr>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
</tr>
</tfoot>
</table>
:not(:first-child)
и :not(:last-child)
должны делать трюк, кажется, что они поддерживаются всеми последними браузерами.
Если вам нужна поддержка IE < 9, вы можете добавлять классы или заменить td
на th