CSS:焦点无法在iOS中使用 [英] CSS :focus Not Working in iOS
问题描述
我有一个装有图像的盒子.在悬停/焦点上，我希望颜色叠加层和标题在其上淡入淡出.除iOS设备外，它几乎可以在几乎所有浏览器和设备上正常工作.
I have a box with an image in it. On hover / focus, I want a color overlay and caption to fade in over it. It works perfectly in almost every browser and device except on iOS devices.
我同时使用:hover和:focus伪类来容纳各种设备，但是对于iOS似乎没有帮助.当您将鼠标悬停在上方时，什么也没发生.
I am using both :hover and :focus pseudo-classes to accommodate various devices, but it doesn't seem to help with iOS. Nothing happens when you mouse over.
这是我的代码，我也有一个功能全面的小提琴.
Here is my code, and I also have a fully functioning 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，所以我并不完全反对，我只是认为没有必要.
Is there some way I can make this work without JS? I am using jQuery on the page so I'm not totally opposed, I just didn't think it was necessary.
推荐答案
The solution in the post Sergey Denisov shared worked. You simply add ontouchstart="" to just the body element, and it magically works, like so:
<body ontouchstart="">
...
</body>
就是这样！无法告诉您这是如何运作或为何运作，但确实如此.
That's it! Couldn't tell you how or why this works, but it does.
这篇关于CSS:焦点无法在iOS中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
