css：焦点在 iOS Safari/Chrome 中不起作用，在 Android/PC Chrome 中很好

Question

我有一个无法修改 HTML 的项目。在移动设备上，我必须有一个可打开的菜单，但我必须添加一个 :before 伪元素，这样点击就不会激活 link 然后当菜单打开时（当它被聚焦时），过渡 I将 :before 元素向上移动，以便用户可以单击 links。这在我的电脑 Chrome 和 Android 手机上都可以正常工作，但在 iOS Safari 或 Chrome...

上却不行

这里是：http://jsfiddle.net/59pp5o7t/1/

您是否知道问题出在哪里，或者有更好的纯 CSS 解决方案来解决我的问题？

谢谢！

<div class="portlet-body">
<div class="nav-menu nav-menu-style-">
    <ul class="layouts level-1">
        <li class="open selected "><a class="open selected " href="#"> Page 1</a>
        </li>
        <li class="open "><a class="open " href="#"> Page 2</a>
        </li>
        <li class="open "><a class="open " href="#"> Page 3</a>
        </li>
        <li class="open "><a class="open " href="#"> Page 4</a>
        </li>
    </ul>
</div>

Answer 1

如果您可以尝试将 ontouchstart="" 添加到 <body> 标签，它可能会奏效。

我不太确定 CSS 唯一的解决方案.. =(

编辑：也看看这个.. LINK

已更新jsfiddle

<body ontouchstart="">
    <div class="portlet-body">
        <div class="nav-menu nav-menu-style-">
            <ul class="layouts level-1">
                <li class="open selected "><a class="open selected " href="#"> Page 1</a>
                </li>
                <li class="open "><a class="open " href="#"> Page 2</a>
                </li>
                <li class="open "><a class="open " href="#"> Page 3</a>
                </li>
                <li class="open "><a class="open " href="#"> Page 4</a>
                </li>
            </ul>
        </div>
    </div>
</body>

Answer 2

将 tabindex="0" 添加到您要关注的内容 -- 例如

<div tabindex="0">click me</div>

css：焦点在 iOS Safari/Chrome 中不起作用，在 Android/PC Chrome 中很好

css :focus not working in iOS Safari/Chrome, fine on Android/PC Chrome

android

ios

google-chrome

safari

focus