点击 iphone 显示悬停效果

Question

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

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

小提琴在这里：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" 添加到金属项目来解决它：)