如何使用CSS实现grid行仅自身85%宽度范围内可点击且hover变色

问题根源 #

你当前的可点击元素<a>是外层容器，默认会占满父级的整行宽度，你设置的width: 85%、margin: auto只作用在内部的ListWrapper元素上，所以<a>的可点击范围还是整行，点击ListWrapper左右的空白区域就会触发跳转。另外你的HTML代码多写了一个多余的</div>闭合标签，会导致DOM结构解析异常。

解决方案 #

把宽度、居中属性从ListWrapper移到外层的<a>标签上，直接限制可点击元素本身的尺寸即可，修改后的代码如下：

/* CSS CODE */
.BlackLink:link { 
  text-decoration:none; 
  color:black;
  /* 把原来ListWrapper的宽度、居中属性移到这里 */
  display: block;
  width: 85%;
  margin: auto;
}

.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;
  /* 移除这里原有的width和margin属性 */
}

.ListWrapper:hover { 
  background-color:#1b9bff; 
  color:white; 
}

<!-- HTML CODE 移除多余的闭合</div>标签 -->
<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>
</a>

效果说明 #

修改后可点击的<a>标签本身就是85%宽度且居中，只有点击这个85%宽度范围内的区域才会触发跳转，hover变色效果也和原有逻辑完全一致。

内容的提问来源于stack exchange，提问作者craison