CSS：焦点不适用于iOS
我有一个带有图像的盒子。 在hover/焦点时，我想要一个颜色叠加和标题淡入其中。 除iOS设备外，它几乎适用于所有浏览器和设备。
我正在使用：hover和：focus伪类来适应各种设备，但它似乎对iOS没有帮助。 鼠标hover时没有任何反应。
这是我的代码，我也有一个function齐全的小提琴 。
* { padding: 0; margin: 0; } .my_image { float: left; width: 50%; margin: 0; padding: 0; position: relative; } .my_image p { position: absolute; color: #fff; display: block; padding: 0; margin: 0; opacity: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */ -webkit-transition: opacity .25s ease; -moz-transition: opacity .25s ease; } .overlay { top: 0; position: absolute; width: 100%; height: 100%; background: rgba(121, 87, 164, .80); text-align: center; opacity: 0; -webkit-transition: opacity .25s ease; -moz-transition: opacity .25s ease; } .my_image:hover .overlay, .my_image:hover p, .my_image:focus .overlay, .my_image:focus p { opacity: 1; visibility: visible; } 
Overlay Caption
有没有什么方法可以在没有JS的情况下完成这项工作？ 我在页面上使用jQuery，所以我不是完全反对，我只是认为没有必要。
谢尔盖·杰尼索夫分享的解决方案是有效的。 你只需将ontouchstart=""添加到body元素中，它就会神奇地起作用，就像这样：
...
而已！ 无法告诉你它是如何或为什么有效，但确实如此。