主页 / 问题 / 1390198
Accepted
Проста Miha
Asked:2022-08-14 23:31:13 +0000 UTC2022-08-14 23:31:13 +0000 UTC

:hover 上的样式应用于下一个元素

  • 772

它是什么样的？为什么到下一个元素而不是它自己？？？如何使样式正常工作？）

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

html

1 个回答

  1. Best Answer

    辅助前后元素必须用::, 不:
    .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>

    • 0

相关问题