Блог

Главная - Вопросы по программированию - Как удалить границу при наведении

Как удалить границу при наведении

#html #css

Вопрос:

У меня есть 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>

изображение

Ответ №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;
  amp; .card {
    border: none;
    border-left: 1px solid #ccc;
  }
}


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

Ответ №2:

Удалить: border-right: 1px solid #ccc;

Метки: