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'});
}

移除移动设备上的翻转状态？

1 个答案: