修复iOS上的悬停行为
[英]Fixing hover behavior on iOS
问题描述
I've got three circular images that display information when you hover over them. 
当您将鼠标悬停在上面时，我得到了三个显示信息的圆形图像。 Chrome & Safari both work fine, and on my android 4.4 device tapping the image reveals contact info, which is cleared by tapping anywhere outside of it. Chrome和Safari都可以正常工作，并且在我的android 4.4设备上点击图像可以显示联系人信息，通过点击图像外部的任何位置可以清除该信息。
However, on iOS 10.1.1, 'tapping' the image doesn't produce the desired effect, while 'tapping' the area where a hidden link is superimposed over the image does work. 但是，在iOS 10.1.1上，“点击”图像不会产生预期的效果，而“点击”隐藏链接叠加在图像上的区域确实起作用。 This isn't desirable since the info can't be cleared by tapping elsewhere. 这是不可取的，因为无法通过点击其他位置来清除信息。
Link to Codepen Example 链接到Codepen示例
HTML 的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>
How can I get mobile Safari to handle :hover events like the android version of Chrome? 我如何才能使移动Safari处理：hover事件，例如Android版本的Chrome？
Any advice is welcome, looking forward to figuring this out! 欢迎任何建议，希望能解决这个问题！
1 个解决方案
解决方案1
1 2016-11-21 09:12:13
我最近遇到了这个问题，并设法通过在body标签中添加ontouchstart=""来解决此问题，如下所示：
<body ontouchstart="">
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.