Upon implementing "hover one DIV - affecting another inner DIV," a strange issue arose on iPad/iPhones where it now requires two taps to click on the link within the DIV with the hover effect:
Below is the HTML code:
<div class="portfblock">
<div id="portfblock1_imgdiv"> <a href="http://photoRadosti.com" target="_blank">
<div class="portfblock_imgdiv_txt_dsc_over">Baby & Family Photography</div>
</a>
</div>
<div id="portfblock_desc"> <a href="http://photoRadosti.com" target="_blank">photoRadosti.com</a>
</div>
</div>
CSS:
.portfblock:hover .portfblock_imgdiv_txt_dsc_over {
visibility: visible;
}
The first tap triggers the on-hover action, making the sub-div with the class portfblock_imgdiv_txt_dsc_over visible as intended by the hover effect. Only after the second tap does the href link jump.
To view the issue on iPad/iPhone, visit my full page here.
Check out the HTML and CSS snippets along with the problematic section on JSFiddle: http://jsfiddle.net/bubencode/5doLj02e/
While this works well on computers using a mouse, touchscreens require two taps to navigate to the links in website thumbnails.
Has anyone else encountered this issue? Is there a way to disable the hover action when tapping on the div with hover on touchscreen devices, allowing the link href jump after the first tap?
Your assistance would be greatly appreciated!
Sincerely, @bubencode