html - 在 iphone 上单击时显示悬停效果

Question

我有一个有趣的问题，我真的希望有人能帮助我。 我创建了一个 fiddle ，它显示了我正在处理的网站上的代码。

问题: 我有悬停效果，显示背景图像。在 android 上，只需单击一下即可显示图像，但这在 iPhone 上不起作用。有谁知道如何解决这个问题？我只想通过单击显示图像 - 没有链接或任何东西:)

fiddle 在这里:https://jsfiddle.net/tLojh36u/

<div class="row no-gutters">
    <div class="col-md-8 mx-auto">
      <h2 class="pt-5 text-uppercase">Krom & Nikkellegeringer</h2>
      <div class="metal-container d-flex flex-wrap">
        <div id="krom1" class="metal-item text-center flex-column shadow-sm">
          <h3>Rustfri stål 304</h3>
        </div>
        <div id="krom2" class="metal-item text-center flex-column shadow-sm">
          <h3>Rustfri stål 316</h3>
        </div>
        <div id="krom3" class="metal-item text-center flex-column shadow-sm">
          <h3>Rustfri spåner</h3>
        </div>
        <div id="krom5" class="metal-item text-center flex-column shadow-sm">
          <h3>Kromstål</h3>
        </div>

      </div>
    </div>
  </div>

可以在 fiddle 中看到 CSS

Answer 1

我通过向金属元素添加 onClick"return true"自己解决了这个问题 :)