Как добавить эффект наведения из браузера с помощью CSS - PullRequest
Новая
       7

Как добавить эффект наведения из браузера с помощью CSS

0 голосов
/ 16 мая 2018

Я пытаюсь добавить эффект наведения в мое веб-приложение.

Я использовал: 

  .families-container{
margin-bottom: 1em;
padding-bottom: 2em;
height: 22%;
border: solid black 2px;
border-radius: 15px;
background-color: #D8D8D8;
padding-left: 3em;
padding-top: 1em;
display: table;
width: 97%;

}

Я пытаюсь добавить эффект контура при наведении на контейнер.Когда вы выбираете поле в Chrome или Firefox, я хочу этот синий контур, но добавленный мной контур не оборачивается вокруг оригинального контейнера. 

.hover-effect:hover {
 box-shadow: 3px 4px 14px black;
 outline: solid rgb(19,108,214,0.8) 3px;
 outline-offset: -5px;
   }

Контур показывает синий квадрат, и я ищуокруглая коробка.Есть ли какой-нибудь веб-набор, который я мог бы использовать для добавления контура наведения, чтобы он соответствовал изогнутым краям.Можете ли вы изменить радиус контура?Каков код для создания эффекта наведения на любой браузер?

1 Ответ

0 голосов
/ 16 мая 2018

Для этого вы можете использовать абсолютно позиционированный псевдоэлемент.Обычно скрывайте псевдоэлемент и отображайте его при наведении курсора. 

.families-container {
  margin-bottom: 1em;
  padding-bottom: 2em;
  height: 22%;
  border: solid black 2px;
  border-radius: 15px;
  background-color: #D8D8D8;
  padding-left: 3em;
  padding-top: 1em;
  display: table;
  width: 97%;
  position: relative;
}

.families-container::after {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  background-color: transparent;
  border: 2px solid rgb(19,108,214,0.8);
  box-shadow: 3px 4px 14px black;
  border-radius: 17px;
  display: none;
}

.families-container:hover::after {
  display: block;
}
<div class="families-container"></div>
...