iOS web 视图不释放

标签: ios HTML UIWebView CSS
发布时间: 2017/3/23 3:46:55
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我在设计为利用 css 的 iOS 优化 HTML 页。当用户点击按钮时,它被应该淡出,然后很快回来的。然而,它不褪色回中,处于 50%的不透明度。

下面是我使用的 CSS:

.increaseFont{
        opacity:1.0;
}
.decreaseFont{
        opacity:1.0;
}
.increaseFont:hover{
    opacity:0.5;
}
.decreaseFont:hover{
    opacity:0.5;
}

前tap︰enter image description here

后点击︰enter image description here

关于为什么会出现这种情况有什么想法?

解决方法 1:

所以,如果我了解当用户把他们的手指按下按钮有效接触它应更改为淡入淡出,然后当用户释放手指它应该回到 1 的不透明度,但相反它停留在.5。

如果出现这种情况这有瓜葛的事件的触摸设备缺乏的问题。正在发生的是,当您单击它时它停留在悬停状态。如果你去别处在 web 视图中单击,然后你会看到它改回 1 的不透明度。为了做这样的事情与触摸设备,虽然你将需要使用 javascript 和作为触摸设备触发此观看为下和释放事件。

您可能会收到的另一个建议是使用 :active 而不是 :hover 但是你会看到一个类似如果不是更糟糕的结果。所以这就是为什么这种情况发生。至于如何解决这一问题。您可以使用 touchstarttouchend 是您可以侦听在 javascript 中触动发生时触发的事件的事件。这里是一个 JSFiddle 的例子。

http://jsfiddle.net/E3dNN/2/

基本上有下面的 javascript 代码

document.getElementById('box').addEventListener('touchstart', function () {
    $('#elementID').css('opacity', '0.5');
});
document.getElementById('box').addEventListener('touchend', function () {
    $('#elementID').css('opacity', '1');
});

在新的 CSS 将在 CSS 中处理规格来了这样的事情,但并不会一段时间。

这里也是博客文章,以及谈到这。

祝你好运。

官方微信
官方QQ群
31647020