在 Safari iOS 浏览器纯 CSS中点击触摸屏时如何更改内容

如何解决在 Safari iOS 浏览器纯 CSS中点击触摸屏时如何更改内容

这是适用于移动浏览器的功能，除了 iOS Safari。我在列表项中只有两个并行的 span 元素（每个元素一个类）。当 display 或 :hover 伪类在 :focus 元素上触发时，每个类的 <li> 属性的值设置为切换。这使得我可以在用户悬停或点击项目时更改每个列表项目的内容。除了适用于 iOS 的 Safari 之外，它运行良好。

这是我正在做的一个例子：https://devrobgilb.com/Test/（我做了同样的事情 this CodePen 也是如此，但是 CodePen 的工作原理使它可以在 Safari for iOS 上正常工作）。任何有关让 Safari iOS 使用相同功能的最佳方法的任何帮助将不胜感激。

（最后 6 个 css-selectors 是让它打勾的原因）

下面是我的代码：

/* I'm a CSS file weeeee */

body {
  background: lightblue;
}

section {
  margin: 20% 30%;
  font-size: 48px;
}

li {
  padding: 30px;
}

span {
  padding: 10px;
}

.default {
  background: lightpink;
  display: inline-block;
}

.appear {
  background: lightgreen;
  display: none;
}

li:hover > .default {
  display: none;
}

li:hover > .appear {
  display: inline-block;
}

li:focus > .default {
  display: none;
}

li:focus > .appear {
  display: inline-block;
}

<body>
  <section>
  <ul>
    <li>
      <span class="default">Hover or tap.</span><span class="appear">You did it,hooray.</span>
    </li>
    <li>
      <span class="default">Hover or tap.</span><span class="appear">You did it,hooray.</span>
    </li>
  </ul>
  </section>
</body>