html - 在移动设备上删除翻转状态？

Question

我目前正在使用 HTML/CSS 来触发图像的翻转状态。当图像悬停时出现这种翻转状态，当相邻文本在父 div 中翻转时也会出现。

但是，在移动设备上（网站是响应式的），单击/点按图像会启用此翻转状态，并且需要第二次单击/点按才能使链接正常工作。

我该如何阻止这种情况发生？

这是HTML：

<div class="four columns post alpha">
            <div class="thumbnail">
                <div class="image">
                <a href="banjee.html"><img class="scale-with-grid" src="images/thumb_banjee.jpg">
                <img class="scale-with-grid hoverimage" src="images/thumb_overlay.png"></a>
                </div>
                <a href="banjee.html"><h3>Banjee</h3></a>


            </div>

这是相应的CSS：

.hoverimage { 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: none; 
}

.thumbnail:hover .hoverimage, 
.image:hover .hoverimage { 
    display: block;
    cursor: pointer;
}

Answer 1

使用 Javascript 代码从 PC 浏览时使此 CSS 样式有条件：

if(!(/android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent.toLowerCase()))){
$(".hoverimage").css({'position':'absolute','top':0,'left':0,'display':'none'});
$(".thumbnail:hover .hoverimage, .image:hover .hoverimage").css({'display':'block','cursor':'pointer'});
}