div-hover 上的 CSS3 上滑不适用于移动设备/平板电脑

Question

我正在尝试使用 css3 制作一个简单的悬停效果。它在 pc 上运行良好，但在移动设备上并不完全。当我触摸图片时，它向上滑动，但是当我触摸文本或 div 时，它不起作用。

Here's my fiddle

在桌面 PC 上工作正常，在手机/平板电脑 (iPhone/iPad) 上不工作:

<ul class="grid blockhover">
<li>
    <figure>
        <div><h1>headline</h1></div>
        <figcaption>text text text text text</figcaption>
    </figure>
</li>
</ul>

在手机/​​平板电脑上运行良好

<ul class="grid blockhover">
<li>
    <figure>
        <div><img src="http://www.adhoc-media.de/data/adhoc/test.jpg" alt=""></div>
        <figcaption>text text text text text</figcaption>
    </figure>
</li>
</ul>

Answer 1

在这种情况下，移动浏览器无法识别 Divs 或 H1 等元素的悬停指令，但它可以识别 imgs

解决此问题的最佳方法是使用 jQuery 而不是 CSS 来处理交互，因为 99% 的设备都广泛支持它!

希望对您有所帮助!