如何去除懸停時的邊框-有解無憂

我有 3 張卡片，它有右邊框。現在，如果我將滑鼠懸停在任何卡片上，我們會顯示方框陰影。但仍然可以看到同級卡的右邊框。我怎樣才能洗掉它？這是我的 CodePen的如何去除懸停時的邊框

uj5u.com熱心網友回復：

您可以使用一個技巧，將選擇器添加到您懸停的卡片旁邊的卡片上，然后將您更改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;
  }
}

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

您可以在懸停時將邊框的顏色設定為透明。

.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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/324899.html

標籤：html css

上一篇：使用css隱藏特定p標簽的第二個div

下一篇：在div內添加邊框