Search code examples
ioscsshovertouchscreen

Hover one DIV affecting another DIV: Why takes two taps on portable devices?

After I have implemented "hover one DIV - affecting another inner DIV" I noticed strange misbehavior on iPad/iPhones. Now it takes two taps to click on the link in the DIV with hover code:

HTML:

<div class="portfblock">
    <div id="portfblock1_imgdiv"> <a href="http://photoRadosti.com" target="_blank"> 
                <div class="portfblock_imgdiv_txt_dsc_over">Baby &amp; Family Photography</div> 
              </a>
    </div>
    <!-- #portfblock1_imgdiv -->
    <div id="portfblock_desc"> <a href="http://photoRadosti.com" target="_blank">photoRadosti.com</a>

    </div>
</div>
<!-- #portfblock -->

CSS:

.portfblock:hover .portfblock_imgdiv_txt_dsc_over {
    visibility: visible; 
}

First tap only executes on-hover action (the sub-div with the class .portfblock_imgdiv_txt_dsc_over becomes visible as needed by hover), and only the second tap executes the href link jump.

My whole page to look at the misbehavior from iPad/iPhone is here.

And the snippets of HTML and CSS code with one of the section to check are here at JSFiddle: http://jsfiddle.net/bubencode/5doLj02e/

It works fine on computer with the mouse, but it takes two taps on touchscreens to go to the links in websites thumbnails.

Might be anyone also faced the same effect? Is it possible to omit hover action while tapping on the div with hover from touchscreen devices, and to have the link href jump right after the first tap?

Would appreciate your help!

@bubencode

Solution

  • This is the way hover works on mobile devices. Since the concept of "hover" doesn't exist if you don't have a cursor the choice was to trigger hover on the first tap and click on the second. The reasoning was most likely to not break sites using hover for example when showing drop-down menus or similar.

    If the hover is meaningless on touch-devices, consider detecting this and removing it, making your website responsive.