I have a rounded div which has a rounded image and a title at the bottom whith opacity: 0.5;
On hover the opacity should become 1. It works fine on all desktop browsers and Firefox for iOS but it doesn't work on Safari nor Chrome for iOS.
Fiddle: https://jsfiddle.net/a10rLbnL/2/
HTML:
<div class="video_wrap update">
<div class="content">
<div class="img_wrap"><img src="https://i.ytimg.com/vi/0HDdjwpPM3Y/hqdefault.jpg"></div>
<div class="title_wrap"><div class="title">bang bang</div></div>
</div>
</div>
CSS:
.video_wrap {
display: inline-block;
width: 30%;
padding-bottom: 30%;
margin: 0 1%;
position: relative;
vertical-align: top;
}
.content {
position: absolute;
height: 100%;
width: 100%;
}
.img_wrap {
height: 100%;
border-radius: 120px;
overflow: hidden;
}
.title_wrap {
line-height: 50px;
top: -50px;
height: 50px;
position: relative;
left: 0px;
background: #fff;
color: #f8008c;
font-size: 12px;
text-align: center;
cursor: default;
opacity: 0.5;
transition: all .5s ease-in;
min-height: 50px;
}
.img_wrap img {
height: 100%;
cursor: pointer;
}
.title_wrap:hover {opacity: 1}
The HOVER mobile app is available on all Apple mobile devices on iOS 11.1 or newer and most Android mobile devices on Android 8.0 or newer. You can capture photos with a smartphone or tablet.
Hover effects inform users what they can interact with by providing visual feedback on buttons. But there's a problem — hover effects are for desktop apps, not mobile apps. There are no mouse devices on mobile, so users don't have the luxury of using hover effects.
Mobile devices use touch screen, which reacts only to touch, so there is no hover. Systems vary, on some a first touch is considered a hover and the second a click, but on many a touch is a click. You cannot rely on hover for mobile devices.
The :hover selector is used to select elements when you mouse over them. Tip: The :hover selector can be used on all elements, not only on links. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.
The iOS Browser needs an element that is clickable by default. If you use HTML5 you can change the wrapper div
to an a-tag
:
<a href="javascript:void(0);" class="title_wrap"><div class="title">bang bang</div></a>
and set it to an block element:
.title_wrap {
...
display:block;
}
If you don't use HTML5 you have to change the <div class="title">
to an inline elment like <span class="title">
so the code is valid.
I found a workaround: if you add onclick=""
to the div, the hover will work.
Your html would be:
<link rel="stylesheet" href="hover.css" type="text/css"/>
<div class="video_wrap update">
<div class="content">
<div class="img_wrap"><img src="https://i.ytimg.com/vi/0HDdjwpPM3Y/hqdefault.jpg"></div>
<div class="title_wrap" onclick=""><div class="title">bang bang</div></div>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With