CODEWITHSUNDEEP
htmlcsshtml-tablehover
errata
errata

Reputation: 6031

Hovering rows with the same class in HTML table with CSS only

I have 2 HTML tables with the same row class names:

.tables {
  display: flex;
}

table {
  margin: 10px;
}

table, tr, td {
  border: 1px solid black;
}

tr[class^="row-"]:hover {
  background-color: red;
}
<div class="tables">
  <table>
    <tr class="row-1">
      <td>row 1, col 1</td>
      <td>row 1, col 2</td>
    </tr>
    <tr class="row-2">
      <td>row 2, col 1</td>
      <td>row 2, col 2</td>
    </tr>
  </table>
  <table>
    <tr class="row-1">
      <td>row 1, col 1</td>
      <td>row 1, col 2</td>
    </tr>
    <tr class="row-2">
      <td>row 2, col 1</td>
      <td>row 2, col 2</td>
    </tr>
  </table>
</div>

Is it possible to change background color of rows with the same class name in both tables with CSS only (no JavaScript) on mouse hover?

Upvotes: 0

Views: 52

Answers (1)

j08691
j08691

Reputation: 207901

You can use :has() which Chrome and Edge now support, presumably with the rest of the browsers to follow:

.tables {
  display: flex;
}

table {
  margin: 10px;
}

table,
tr,
td {
  border: 1px solid black;
}

div.tables:has(tr.row-1:hover) tr.row-1,
div.tables:has(tr.row-2:hover) tr.row-2 {
  background-color: red;
}
<div class="tables">
  <table>
    <tr class="row-1">
      <td>row 1, col 1</td>
      <td>row 1, col 2</td>
    </tr>
    <tr class="row-2">
      <td>row 2, col 1</td>
      <td>row 2, col 2</td>
    </tr>
  </table>
  <table>
    <tr class="row-1">
      <td>row 1, col 1</td>
      <td>row 1, col 2</td>
    </tr>
    <tr class="row-2">
      <td>row 2, col 1</td>
      <td>row 2, col 2</td>
    </tr>
  </table>
</div>

Upvotes: 1

Related Questions