Hard to click links on touchscreen

Question

This is my setup(sorry for the bad indetation):

<div class="container">
   <a href="somewhere">
    <div class="tall"></div>
   </a>
  <a href="somewhere else">
    <div class="small"></div>
  </a>
</div>

I also have some basic hover styles on the "container". My problem is that on mobile (im currently testing on iOS) the two links that wrap around the "tall" and "small" are hard to click. They trigger the hover style on the "container" but you have to hold your finger on them for a second(or even more) for the link to actually open. Any ideas how I can fix this?

Answer 1

Unfortunately the :hover selector on a link does that on touchscreen devices - i.e. it will show the hover effect for a second or two and then click the link. The best way to handle this would be to just detect device type and remove the :hover style altogether. You won't need it for a touchscreen anyways.

Read this: http://www.prowebdesign.ro/how-to-deal-with-hover-on-touch-screen-devices/