css :focus在iOS Safari / Chrome中不起作用，在Android / PC Chrome上很好

我有一个无法修改HTML的项目。在移动设备上，我必须有一个可打开的菜单，但我必须添加一个：before 伪元素，这样单击就不会激活链接，然后在菜单打开时（当它聚焦时），通过过渡，我将：before 元素向上移动，以便用户可以单击链接。这在我的 PC 上的 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>

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

我不太确定仅CSS的解决方案.. =（

编辑：也看看这个..链接

更新的 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>

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

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

相关内容

最新更新

热门标签：