悬停一个影响另一个DIV的DIV：为什么在便携式设备上需要两次点击？

Question

在我实施＆＃34;悬停一个DIV - 影响另一个内部DIV＆＃34;我注意到 iPad / iPhone 上出现了奇怪的不当行为。现在，使用悬停代码点击DIV中的链接需要两次点按：

HTML：

<div class="portfblock">
    <div id="portfblock1_imgdiv"> <a href="http://photoRadosti.com" target="_blank"> 
                <div class="portfblock_imgdiv_txt_dsc_over">Baby &amp; Family Photography</div> 
              </a>
    </div>
    <!-- #portfblock1_imgdiv -->
    <div id="portfblock_desc"> <a href="http://photoRadosti.com" target="_blank">photoRadosti.com</a>

    </div>
</div>
<!-- #portfblock -->

CSS：

.portfblock:hover .portfblock_imgdiv_txt_dsc_over {
    visibility: visible; 
}

首次点按仅执行on-hover操作（带有类的子div。 portfblock_imgdiv_txt_dsc_over 在悬停时根据需要变为可见），只有第二次点击执行href链接跳转。

我在整个页面上看到来自iPad / iPhone的错误行为是here。

HTML和CSS代码的片段以及要检查的部分之一在JSFiddle中： http://jsfiddle.net/bubencode/5doLj02e/

使用鼠标在计算机上工作正常，但触摸屏上需要两次点击才能转到网站缩略图中的链接。

任何人都可能面临同样的效果吗？是否可以在从触摸屏设备悬停时点击div时省略悬停操作，并在第一次点击后立即跳转链接href？

非常感谢您的帮助！

@bubencode

Answer 1

这是悬停在移动设备上的工作方式。由于＆＃34; hover＆＃34;的概念如果您没有光标，则选择是在第一次点击时触发悬停并单击第二个光标，则不存在。如果显示下拉菜单或类似菜单，推理最有可能不会使用悬停来破坏网站。

如果悬停在触摸设备上毫无意义，请考虑检测并将其删除，从而使您的网站响应。