Question

我们的想法是让那些使用键盘在网站上浏览的用户能够使用tab获得一些非常有意义的反馈信息，这些信息反映了他们当前的焦点，超出了通常错过的默认蓝色轮廓。或打破视觉设计。

实际上，您可以创建一个::after伪元素，仅显示在focus州，并且您可以预览下面的代码段，它的工作非常棒（可能不适用于旧浏览器）。

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

我想不出任何使用CSS实现这一目标的方法。它只能通过JavaScript吗？谷歌正在这样做，如果您搜索某些内容并按下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>

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

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

1 个答案: