CSS :hover not working on iOS Safari and Chrome
Solution 1
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>
Solution 2
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.
M1X
Experienced Software Engineer with a demonstrated history of working in the web development industry. Strong engineering professional skilles in Angular, TypeScript, ECMAScript 6 and Node.Js.
Updated on July 25, 2020Comments
-
M1X almost 4 years
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}
-
M1X over 8 yearsWhen you tap and hold. It's the same as hover and it works in Firefox for iOS.
-
Wouter van Dijke over 8 yearsYou're right. The problem I have when trying to hover in both Chrome and Safari is that I'm selecting the text when I tap and hold on the div. I think Safari puts 'selecting text' before 'applying hover'.
-
Wouter van Dijke over 8 yearsI found a workaround: if you add
onclick=""
to the div, the hover will work. See updated answer. -
M1X over 8 yearsYeah but you should click at it. it doesn't work if you tap and hold.
-
kollein over 7 yearsI have a risk like that, but i dont understand why i have two :hover on two <div class=""> different, the first div.class1:hover -> OK on Chrome & Safari Mobile. But the last div.class2:hover -> not working on Safari Mobile, it's only working on Chrome Mobile
-
Gavin over 7 yearsIf you add
cursor: pointer
to your CSS it has the same affect. -
Mark over 4 yearsYou sir just saved my butt with a client project. =)