javascript - 修复iOS上的悬停行为 - Thinbug

修复iOS上的悬停行为

时间：2016-11-21 08:02:35

标签： javascript jquery html css hover

我有三个圆形图像，当您将鼠标悬停在它们上方时会显示信息。 Chrome＆amp; Safari都工作正常，在我的Android 4.4设备上点击图像显示联系信息，通过点击它外面的任何地方清除。

然而，在iOS 10.1.1上，“点击”＆＃39;图像不会产生所需的效果，同时“点击”＃39;隐藏链接叠加在图像上的区域确实有效。这是不可取的，因为无法通过点击其他地方来清除信息。

Link to Codepen Example

HTML

<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
  <div class="ch-info">
    <h3>Use what you have</h3>
    <p>by Angela Duncan <a href="http://drbl.in/eOPF">View on      Dribbble</a>
    </p>
   </div>
 </div>
</li>
<li>
<div class="ch-item ch-img-2">
  <div class="ch-info">
    <h3>Common Causes of Stains</h3>
    <p>by Antonio F. Mondragon <a href="http://drbl.in/eKMi">View on Dribbble</a></p>
  </div>
</div>
</li>
<li>
<div class="ch-item ch-img-3">
  <div class="ch-info">
    <h3>Pink Lightning</h3>
    <p>by Charlie Wagers <a href="http://drbl.in/ekhp">View on Dribbble</a></p>
  </div>
</div>

如何让移动Safari处理：悬停事件，如Android版Chrome？

欢迎任何建议，期待着解决这个问题！

1 个答案:

答案 0 :(得分：1)

我最近遇到过这个问题并设法通过将ontouchstart=""添加到body标记来解决此问题，如下所示：

 <body ontouchstart="">