如何移除卡片Hover状态下相邻兄弟卡片的右侧边框

这个问题很常见，核心原因是：当你移除hover卡片的border-right时，相邻卡片的边框（比如左侧卡片的border-right）依然存在于hover卡片的边缘位置，并且因为层级关系会显示在hover卡片的阴影上方，看起来像是残留的边框。下面给你几种实用的解决方案：

方案1：提升Hover卡片的层级（最简单） #

通过给hover的卡片设置更高的z-index，让它的阴影覆盖住相邻卡片的边框：

.grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
}
.card:not(:last-child) { 
  padding: 1rem; 
  border-right: 1px solid #ccc; 
}
.card {
  padding: 1rem;
  position: relative; /* 必须设置，z-index才生效 */
  z-index: 1;
}
.card:hover { 
  box-shadow: 0px 4px 12px #ccc; 
  border-radius: $radius; 
  border: none; 
  z-index: 2; /* 提升层级，覆盖相邻边框 */
}

这样hover的卡片会因为层级更高，它的阴影和内容会盖住旁边卡片的边框，视觉上就不会有残留了。

方案2：用伪元素替代border-right（更灵活） #

把原本的border-right换成伪元素实现的分隔线，这样可以更精准地控制分隔线的显示：

.grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
}
.card {
  padding: 1rem;
  position: relative;
}
/* 给非最后一个卡片添加右侧分隔线 */
.card:not(:last-child):after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: #ccc;
}
.card:hover { 
  box-shadow: 0px 4px 12px #ccc; 
  border-radius: $radius; 
  margin-right: -1px; /* 避免阴影和分隔线重叠 */
}
/* 当卡片hover时，隐藏它左侧相邻卡片的分隔线 */
.card:hover ~ .card:first-child:after {
  display: none;
}

这种方法的好处是分隔线独立于卡片的border，不会因为卡片的border变化而出现布局偏移，也能更灵活地控制显示逻辑。

方案3：调整边框归属（换一种边框思路） #

把border-right换成border-left，只给非第一个卡片添加左侧边框，这样当hover卡片时，移除自身的border-left就不会有左边的残留边框了：

.grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
}
.card:not(:first-child) { 
  padding: 1rem; 
  border-left: 1px solid #ccc; 
}
.card {
  padding: 1rem;
}
.card:hover { 
  box-shadow: 0px 4px 12px #ccc; 
  border-radius: $radius; 
  border: none; 
}

这种方法逻辑简单，因为每个卡片的左侧边框属于自己，hover时移除自身边框就能彻底去掉左边的分隔线，不会有残留。

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