I have a CSS grid:
.grid {
display: grid;
grid-template-columns: 10em 10em;
grid-template-columns: 10em 10em;
overflow: auto;
width: 19em;
height: 8em;
}
.grid-cell {
border: solid 1px;
height: 3em;
}<div class="grid">
<div class="grid-cell" data-row-index="0">A1</div>
<div class="grid-cell" data-row-index="0">A2</div>
<div class="grid-cell" data-row-index="1">B1</div>
<div class="grid-cell" data-row-index="1">B2</div>
<div class="grid-cell" data-row-index="2">C1</div>
<div class="grid-cell" data-row-index="2">C2</div>
</div>Is it possible to highlight all cells of a hovered row without dynamically modifying the cell element's attributes?
Here's a solution using a table instead of a grid.
.grid {
width: 19em;
height: 8em;
overflow: auto;
}
table {
border-collapse: collapse;
width: 20em;
}
tr:hover {
background-color: yellow;
}
td {
border: solid 1px;
height: 3em;
}<div class="grid">
<table>
<tr>
<td>A1</td>
<td>A2</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
</table>
<div>