Изменение цвета рамки при наведении CSS-сетки ⇐ CSS

[Гость]

Я хочу создать простую таблицу, как показано ниже. У меня возникли трудности с изменением границы строки на красную при наведении на нее курсора... до тех пор, пока строка не является строкой заголовка. Таким образом, если у него есть класс "строка заголовков сетки", то при наведении на него ничего не произойдет. Однако для строки данных, т. е. класса "grid", вся граница строки (черная) изменит цвет границы на красный.

Я пытаюсь в этом контексте css/html< /p>

Код: Выделить всё

.grid {
display: grid;
grid-template-columns: 15% 10% 25% 25% 25%;
> * {
height: 5.125rem;
text-align: left;
&:first-child {
border-radius: 0.5rem 0 0 0.5rem;
text-align: left;
padding-left: 1rem;
}

&:last-child {
border-radius: 0 0.5rem 0.5rem 0;
}
margin-bottom: 0.5rem;
}
&:not(.headers-row) > * {
display: flex;
flex-direction: column;
align-items: left;
justify-content: center;
&:first-child {
justify-content: center;
}
border: 1px solid black;
border-left: 0;
border-right: 0;
&:first-child {
border-left: 1px solid black;
}
&:last-child {
border-right: 1px solid black;
}
}
}

с HTML

Код: Выделить всё

Name
Age
Address
Status
QRSCode


John Doe
jdoe@jdoe.com

67

Address 1
Address 2

Status
1234567

Источник: https://stackoverflow.com/questions/781 ... our-change