iPhone CSS：焦点不起作用

Question

我简化了:focus伪类的测试。这是HTML：

<span id="test" tabindex="1">Hello</span>

和CSS：

span#test:focus {
    color: red;
}

当我点击桌面上的跨度时，它按预期工作（将颜色更改为红色）。但是，当我在iPhone上触摸它时，却没有。

如果:focus更改为:hover，我可以让它工作，但我不希望桌面版本，因为我希望它等到用户点击。< / p>

我可能不得不求助于JavaScript，但是有解决方案吗？

由于

Answer 1

假设iphone的宽度为320px或更高，具体取决于型号，peharps媒体查询可以作为替代解决方案：

span#test:focus {
   color: red;
}

@media (max-width: 320px) {
   span#test:hover {
      color: red;
   }
}