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

Question

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

事实上，您可以创建一个::after伪元素，使其仅出现在focus状态，并且您可以预览下面的代码段，它可以很棒地工作（可能不适用于旧浏览器）。

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

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

编辑：我已经看到了另一个问题 。 它对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伪类在鼠标和键盘之间进行: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>