如何去除悬停时的边框

Question

我有 3 张卡片，它有右边框。 现在，如果我将鼠标悬停在任何卡片上，我们会显示方框阴影。 但仍然可以看到同级卡的右边框。 我怎样才能删除它？ 这是我的 CodePen 的链接

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

 <div class="grid"> <div class="card"> <div>Lorem, ipsum.</div> <div>Aut, dolor.</div> <div>Neque, quia?</div> </div> <div class="card"> <div>Lorem, ipsum.</div> <div>Aut, dolor.</div> <div>Neque, quia?</div> </div> <div class="card"> <div>Lorem, ipsum.</div> <div>Aut, dolor.</div> <div>Neque, quia?</div> </div> </div>

Answer 1

您可以使用一个技巧，将选择器添加到您悬停的卡片旁边的卡片并将您的border-right更改为border-left

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

 <div class="grid"> <div class="card"> <div>Lorem, ipsum.</div> <div>Aut, dolor.</div> <div>Neque, quia?</div> </div> <div class="card"> <div>Lorem, ipsum.</div> <div>Aut, dolor.</div> <div>Neque, quia?</div> </div> <div class="card"> <div>Lorem, ipsum.</div> <div>Aut, dolor.</div> <div>Neque, quia?</div> </div> </div>

---

如果您使用 Scss 它将是

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.card {
  padding: 1rem;
  &+.card {
    border: none;
    border-left: 1px solid #ccc;
  }
}


.card:hover {
  box-shadow: 0px 4px 12px #ccc;
  border-radius: $radius;
  border-color: transparent;
  &+.card {
    border-color: transparent;
  }
}

Answer 2

移除： border-right: 1px solid #ccc;

Answer 3

您可以在悬停时将边框的颜色设置为透明。

 .grid { display: grid; grid-template-columns: repeat(3, 1fr); } .grid>div:last-child { border: none; } .card { padding: 1rem; border-right: 1px solid #ccc; } .card:hover { box-shadow: 0px 4px 12px #ccc; border-radius: $radius; border-color: transparent; }

 <div class="grid"> <div class="card"> <div>Lorem, ipsum.</div> <div>Aut, dolor.</div> <div>Neque, quia?</div> </div> <div class="card"> <div>Lorem, ipsum.</div> <div>Aut, dolor.</div> <div>Neque, quia?</div> </div> <div class="card"> <div>Lorem, ipsum.</div> <div>Aut, dolor.</div> <div>Neque, quia?</div> </div> </div>