：关注链接不适用于我网站的移动版本

问题描述

我的网站的移动版本上有一个窗帘菜单，我希望它的链接在点击时从白色变为绿色。为此，我使用了 :focus on CSS 上的元素，甚至尝试将 tabindex="1" 添加到 HTML 上，但会发生以下情况：当我使用检查工具在笔记本电脑上测试移动版本时，链接实际上具有所需的焦点效果；然而，当我在实际的手机上测试时，没有任何反应 - 链接只是保持原来的白色。

有人可以根据我在下面留下的代码提供帮助吗？这听起来应该很容易解决，但我已经尝试了网络上建议的无数解决方案，但到目前为止没有任何效果:(提前致谢！

body {
  background-color: black;
}

.overlay a {
  color: white;
}

.overlay a[tabindex]:focus {
  color: green;
  outline: none;
}

<div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content">
    <a tabindex="1" href="#">Home</a>
    <a tabindex="1" href="#">About</a>
    <a tabindex="1" href="#">Contact</a>
    <a tabindex="1" href="#">CV</a>
  </div>
</div>

解决方法

就您而言，:active 应该适用于移动设备。 :focus 用于 input 标签。