My grid layout consists of 1 row and 4 columns, with the row occupying 85% of the width. I want the entire row to change color when hovered over and be clickable to access another page.
Currently, the row changes colors when hovered over and is clickable, but the link remains active even outside the 85% width. This means that clicking anywhere to the left or right of the row triggers the link. I only want the link to be active when clicked directly on the row itself.
/* CSS CODE */
.ListWrapper {
display:grid;
grid-template-columns:1.5fr 1.8fr 1.5fr 1fr;
grid-template-rows:1fr;
grid-template-areas: "ListTitleTxt email phone groups";
background-color:#EDF5FC;
cursor:pointer;
margin:auto;
width:85% }
.ListWrapper:hover { background-color:#1b9bff; color:white; }
.BlackLink:link { text-decoration:none; color:black; }
/* HTML CODE */
<a class='BlackLink' href='#'>
<div class='ListWrapper'>
<div class='ListTitleTxt'>name</div>
<div class='email'>email</div>
<div class='phone'>phone</div>
<div class='groups'>groups</div></div>
</div></a>