修復iOS上的懸停行為

Question

當您將鼠標懸停在上面時，我得到了三個顯示信息的圓形圖像。 Chrome和Safari都可以正常工作，並且在我的android 4.4設備上點擊圖像可以顯示聯系人信息，通過點擊圖像外部的任何位置可以清除該信息。

但是，在iOS 10.1.1上，“點擊”圖像不會產生預期的效果，而“點擊”隱藏鏈接疊加在圖像上的區域確實起作用。 這是不可取的，因為無法通過點擊其他位置來清除信息。

的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處理：hover事件，例如Android版本的Chrome？

歡迎任何建議，希望能解決這個問題！

Answer 1

我最近遇到了這個問題，並設法通過在body標簽中添加ontouchstart=""來解決此問題，如下所示：

 <body ontouchstart="">

修復iOS上的懸停行為

問題描述

的HTML

我如何才能使移動Safari處理：hover事件，例如Android版本的Chrome？

1 個解決方案

解決方案1
1 2016-11-21 09:12:13

修復iOS上的懸停行為

問題描述

的HTML

我如何才能使移動Safari處理：hover事件，例如Android版本的Chrome？

1 個解決方案

解決方案1 1 2016-11-21 09:12:13

解決方案1
1 2016-11-21 09:12:13