CSS :hover not working on iOS Safari and Chrome

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>