Стиль при :hover применяется на следующий элемент

Question

Это как? Почему следующему элементу а не ему самому????? Как сделать так что-бы стиль работал нормально?)

.action {
  padding: 6px 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.btn-action {
  position: relative;
  display: inline-block;
  padding: 6px 12px;
  margin: 0 12px;
  cursor: pointer;
}

.btn-action:after,
.btn-action:before {
  content: "";
  position: absolute;
  border: 2px solid #000;
  transition: .25s;
}

.btn-action:after {
  width: calc(100% + 12px);
  height: 100%;
  left: calc(-12px / 2);
  top: 0;
}

.btn-action:before {
  height: calc(100% + 8px);
  width: 100%;
  top: calc(-8px / 2);
  left: 0;
}

.btn-action:hover+.btn-action:after,
.btn-action:hover+.btn-action:before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

<div class="action">
  <div class="btn-action atack">Атаковать</div>
  <div class="btn-action change-weapon">Сменить оружие</div>
  <div class="btn-action healing">Лечиться</div>
</div>

Answer 1

Вспомогательные элементы before и after необходимо писать с ::, а не :
.btn-action:hover::after - при наведении на .btn-action применять стили к элементу ::after

.action {
  padding: 6px 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.btn-action {
  position: relative;
  display: inline-block;
  padding: 6px 12px;
  margin: 0 12px;
  cursor: pointer;
}

.btn-action::after,
.btn-action::before {
  content: "";
  position: absolute;
  border: 2px solid #000;
  transition: .25s;
}

.btn-action::after {
  width: calc(100% + 12px);
  height: 100%;
  left: calc(-12px / 2);
  top: 0;
}

.btn-action::before {
  height: calc(100% + 8px);
  width: 100%;
  top: calc(-8px / 2);
  left: 0;
}

.btn-action:hover::after,
.btn-action:hover::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

<div class="action">
  <div class="btn-action atack">Атаковать</div>
  <div class="btn-action change-weapon">Сменить оружие</div>
  <div class="btn-action healing">Лечиться</div>
</div>

БЛОГ НА HUSL

Стиль при :hover применяется на следующий элемент

Ответы (1 шт):