我有一个装有图片的方框。当鼠标悬停/聚焦时,我想要一层颜色叠加和标题淡入到图片上。这在几乎所有浏览器和设备上都可以完美运行,但是在iOS设备上却不行。
我使用:hover和:focus伪类来适应各种设备,但在iOS上似乎没有帮助。当你将鼠标悬停在上面时什么也不会发生。
这是我的代码,我还有一个完全可用的fiddle。
有没有一种方法可以让这个工作在不使用JS的情况下?我在页面上使用了jQuery,所以我并不完全反对使用它,只是我认为这是不必要的。
我使用: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>