关于ios移动设备上的css :: hover变为双触摸，而不是悬停

:hover on ios mobile devices turns into double-touch instead of hover

首先，这不是以下内容的克隆：iPad / iPhone悬停问题导致用户双击链接
因为我想要一个纯CSS的答案。此链接中的所有答案都需要js或jQuery，而一个CSS答案涉及背景图片。我正在尝试更改不透明度，仅此而已。

CSS希望适应移动革命，但我看到的每个简单的" touchDown"(又名touch-hover)创建悬停效果的解决方案都需要javascript或jQuery。

这是一些简单的代码来说明我的意思：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.btn {
border-radius: 5px;
display: block;
opacity: 1; <--from
background: red;
text-align: center;
line-height: 40px;
font-weight: bold;
&:hover {
opacity:.7; <--to
transition: opacity .2s ease-out; <--fun fade animation :)
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
}
}

在Chrome和Safari中测试