Css :hover Not Working On Ios Safari And Chrome

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

Solution 1:

I found a workaround: if you add onclick="" to the div, the hover will work.

Your html would be:

<linkrel="stylesheet"href="hover.css"type="text/css"/><divclass="video_wrap update"><divclass="content"><divclass="img_wrap"><imgsrc="https://i.ytimg.com/vi/0HDdjwpPM3Y/hqdefault.jpg"></div><divclass="title_wrap"onclick=""><divclass="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.