我有一个盒子，里面有一张图片。在悬停/聚焦时，我想要一个颜色叠加层和标题淡入淡出。它几乎适用于除 iOS 设备之外的所有浏览器和设备。
我同时使用 :hover 和 :focus 伪类来适应各种设备，但它似乎对 iOS 没有帮助。鼠标悬停时没有任何反应。
这是我的代码，我还有一个功能齐全的 fiddle .
* {
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;
}<div class="my_image">
<img src="https://unsplash.imgix.net/photo-1428976365951-b70e0fa5c551?fit=crop&fm=jpg&h=225&q=75&w=350" />
<div class="overlay"></div>
<p>Overlay Caption</p>
</div>有什么方法可以在没有 JS 的情况下完成这项工作吗？我在页面上使用 jQuery，所以我并不完全反对，我只是觉得没有必要。
最佳答案
post Sergey Denisov shared 中的解决方案工作了。您只需将 ontouchstart="" 添加到 body 元素，它就会神奇地工作，就像这样:
<body ontouchstart="">
...
</body>
就是这样!无法告诉您这是如何或为何有效，但它确实有效。
关于jquery - CSS :focus Not Working in iOS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30584335/