微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决:关注链接不适用于我网站的移动版本

我的网站的移动版本上有一个窗帘菜单,我希望它的链接在点击时从白色变为绿色。为此,我使用了 :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 标签。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。