I'm looking to create a simple table with the look below. I'm having difficulty changing the border of the row to red when it is being hovered over ... as long as the row is not the header row. So if it has a class of "grid headers-row" then nothing occurs when you hover over it. However for a data row, ie class is "grid" the entire row border (seen in black) will change it's border color to red.
I'm trying within this css/html context
.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; } }}<div class="grid headers-row"><span>Name</span><span>Age</span><span>Address</span><span>Status</span><span>QRSCode</span></div><div class="grid"><span><div>John Doe</div><div>jdoe@jdoe.com</div></span><span>67</span><span><div>Address 1</div><div>Address 2</div></span><span><div>Status</div></span><span><div>1234567</div></span></div>