我有一个无法修改 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 的解决方案.. =(
编辑:也看看这个.. 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>
关于android - css :focus not working in iOS Safari/Chrome, 在 Android/PC Chrome 上正常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27798668/