iOS WebView未发布

Question

我正在设计一个针对iOS优化的HTML页面，它利用了css。当用户点击按钮时，它应该淡出然后淡入。但是，它不会淡入，不透明度保持在50％。

这是我正在使用的CSS：

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

点按前：

点击后：

关于为什么会发生这种情况的任何想法？

Answer 1

:hover可能不是您在触摸屏上寻找的内容......我会尝试使用:active或其中一个psuedo classes。

Answer 2

因此，如果我理解当用户将他们的手指有效地按下按钮时它应该变为淡入淡出然后当用户释放手指时它应该回到不透明度1但是它保持在.5。

如果是这种情况，则与触摸设备缺少事件的问题有关。发生的事情是，当您单击它时，它将保持悬停状态。如果你去网页视图中的其他地方点击，那么你会看到它变回1的不透明度。为了用触摸设备做这样的事情你需要使用javascript并观察向下和向上事件因为触摸设备会触发这个。

您可能会收到的另一个建议是使用:active代替:hover但是您会看到类似但不会更糟的结果。所以这就是为什么会这样。至于如何解决这个问题。您可以使用touchstart和touchend事件，这些事件是您可以在触摸发生时触发的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中处理类似的内容，但这不会有一段时间。

此外还有一个blog post来讨论这个问题。

祝你好运。