В CSS таблицы — это удобный способ организации и представления табличных данных. Добавление эффектов наведения к отдельным ячейкам может улучшить взаимодействие с пользователем и обеспечить визуальную обратную связь. В этой статье мы рассмотрим несколько методов достижения эффектов наведения ячейки в таблицах CSS, каждый из которых сопровождается примером кода. Давайте погрузимся!

Метод 1. Использование селектора :hover
Пример кода:

table tr td:hover {
  background-color: #f2f2f2;
}

Метод 2: добавление класса в целевые ячейки
Пример кода:

<table>
  <tr>
    <td class="hoverable">Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td class="hoverable">Cell 4</td>
  </tr>
</table>

.hoverable:hover {
  background-color: #f2f2f2;
}

Метод 3. Использование обработчиков событий JavaScript
Пример кода:

<table>
  <tr>
    <td onmouseover="hoverCell(this)" onmouseout="resetCell(this)">Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td onmouseover="hoverCell(this)" onmouseout="resetCell(this)">Cell 4</td>
  </tr>
</table>

function hoverCell(element) {
  element.style.backgroundColor = '#f2f2f2';
}
function resetCell(element) {
  element.style.backgroundColor = '';
}

Метод 4. Использование CSS Grid
Пример кода:

.table-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.table-container > div:hover {
  background-color: #f2f2f2;
}

Метод 5: использование CSS Grid и селектора nth-child
Пример кода:

.table-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.table-container > div:nth-child(odd):hover {
  background-color: #f2f2f2;
}

В этой статье мы рассмотрели несколько методов добавления эффектов наведения к отдельным ячейкам в таблицах CSS. Независимо от того, предпочитаете ли вы использовать селектор :hover, добавлять классы или использовать обработчики событий JavaScript, каждый подход позволяет достичь желаемого визуального эффекта. Не забудьте выбрать метод, который лучше всего соответствует вашим конкретным требованиям и контексту проекта. Используя эти методы, вы можете создавать интерактивные и привлекательные таблицы для своих веб-приложений.