伪元素出现在焦点上但不在点击时答案

【问题标题】：Pseudo-element appear on focus but not on click伪元素出现在焦点上但不在点击时
【发布时间】：2016-12-17 04:29:00
【问题描述】：

这个想法是让那些使用键盘浏览网站的用户能够使用tab 获得一些关于他们当前焦点所在位置的真正有意义的反馈，超出通常会错过和/或破坏的默认蓝色轮廓视觉设计。

实际上，您可以创建一个::after 伪元素，使其仅出现在focus 状态，并且您可以预览下面的sn-p，它工作得非常好（可能不适用于旧浏览器）。

问题是，是否可以隐藏箭头，以便用户在单击按钮时看不到它（触发:active 状态，而click 被按下但也有:focus 从按下它的那一刻起），但如果有人使用tab 浏览网站，它仍然存在。

我想不出任何使用 CSS 来实现这一点的方法。只能通过 JavaScript 实现吗？ Google 正在这样做，如果您搜索某些内容并按 tab 并使用键盘浏览，您会看到您的焦点在哪里，左侧有一个箭头。

编辑：我见过other question。它对 JavaScript 方法很有帮助。但我的问题是是否可以纯粹使用 CSS 来实现。例如，我刚刚更新了选择器中的 :active:focus 链接，现在箭头仅在您释放点击后才会出现。

.row{
  text-align: center;
  margin: 1rem 0;
}
button{
  position: relative;
  text-shadow: 0 0 0;
  box-shadow: 0 0 0;
  background: #eee;
  border: 0;
  margin: 0;
  padding: 1rem 2rem;
  transition: all 0.2s ease;
}
button:hover{
  background: dodgerblue;
  color: #fff;
}
button:active{
  top: 2px;
  background: #eee;
  color: #888;
}
button:focus{
  outline: none;
}
button:focus::after{
  content: "▲";
  position: absolute;
  bottom: -1.5rem;
  font-size: 1.5rem;
  font-weight: bold;
  color: dodgerblue;  
  left: 0; right: 0;
  margin: auto;
  animation: pulsing 1s ease infinite;
}
button:active:focus::after{
  content: "";
}
@keyframes pulsing{
  0%,
  100%{
    bottom: -1.5rem;
  }
  50%{
    bottom: -1.75rem;
  }
}

<div class="row">
  <button>First</button>
  <button>Second</button>
  <button>Third</button>
  <button>Fourth</button>
</div>

【问题讨论】：

Input effect on keyboard tab -> focus, but NOT on click 的可能副本虽然读起来很有趣，但从未想过鼠标和键盘焦点之间的差异。
我相信js和google的箭头有关。

标签： javascript css

【解决方案1】：

我认为这个问题没有纯 CSS 解决方案。您可以尝试使用 :hover 伪类来区分鼠标和键盘，但只要您不离开焦点按钮，结果就很好......

编辑：我添加了一个body:hover 解决方法，可能对你来说就足够了吗？

.row{
  text-align: center;
  margin: 1rem 0;
}
button{
  position: relative;
  text-shadow: 0 0 0;
  box-shadow: 0 0 0;
  background: #eee;
  border: 0;
  margin: 0;
  padding: 1rem 2rem;
  transition: all 0.2s ease;
}
button:hover{
  background: dodgerblue;
  color: #fff;
}
button:active{
  top: 2px;
  background: #eee;
  color: #888;
}
button:focus{
  outline: none;
}
button:focus::after{
  content: "▲";
  position: absolute;
  bottom: -1.5rem;
  font-size: 1.5rem;
  font-weight: bold;
  color: dodgerblue;  
  left: 0; right: 0;
  margin: auto;
  animation: pulsing 1s ease infinite;
}
button:active:focus::after,
button:hover::after,
body:hover button::after{
  content: "" !important;
}
body {
  height: 100vh;
  width: 100vw;
}

@keyframes pulsing{
  0%,
  100%{
    bottom: -1.5rem;
  }
  50%{
    bottom: -1.75rem;
  }
}

<div class="row">
  <button>First</button>
  <button>Second</button>
  <button>Third</button>
  <button>Fourth</button>
</div>

【讨论】：