div-hover上的CSS3上滑功能不适用于手机/平板电脑

Question

我试图用css3做一个简单的悬停效果。它在PC上工作正常，但不完全在移动设备上。当我触摸图像时，它会向上滑动，但是当我触摸文本或div时，它就无法工作。

Here's my fiddle

在台式电脑上运行良好，不适用于手机/平板电脑（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＆s等元素的悬停指令，但它可以用于imgs

最好的方法是使用jQuery来处理交互而不是CSS，因为99％的设备都广泛支持它！

我希望这有帮助！