I am confused on why .hover() is behaving this way on iOS.
On desktop I have portfolio gallery images that link off to individual pages of my work. When you hover on any image, it slightly fades and a title animates in. Whenever I view the same gallery on my phone, the fade and animation happens on touch but doesn't take me to the work landing page until I tap it again. It seems like it's getting stuck on the hover in. Any thoughts?
I know I could check for browser width and disable the hover once I start getting into mobile breakpoints but I would rather this feature still be available on the desktop browser. I am totally fine with removing the hover behavior all together in mobile only if possible.
my code:
/*targeted element*/
<a class="workBox" href="<?php echo get_permalink( $the_query->ID ) ?>" ><div class="work" style="background: url('<?php echo $image[0]; ?>') center no-repeat; background-size: cover;"></div><div class="workTitle"><?php echo get_the_title( $the_query->post_title ); ?><div class="landingOffered"><em><?php echo $service; ?></em></div></div></a>
$('.workBox').hover(function() {
$(this).find('.work').css('opacity' , '0.1');
$(this).find('.workTitle').fadeTo(200 ,1);
$(this).find('.landingOffered').velocity({'margin-top': '-5px'}, 200);
}, function() {
$(this).find('.work').css('opacity' , '1');
$(this).find('.workTitle').fadeTo(200 , 0);
$(this).find('.landingOffered').velocity({'margin-top': '10px'}, 200);
});
You can check if the client is a mobile phone with a fairly straight forward check like this :
function clientIsMobilePhone()
{
return navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i);
}
And then do the following :
/*targeted element*/
<a class="workBox" href="<?php echo get_permalink( $the_query->ID ) ?>" ><div class="work" style="background: url('<?php echo $image[0]; ?>') center no-repeat; background-size: cover;"></div><div class="workTitle"><?php echo get_the_title( $the_query->post_title ); ?><div class="landingOffered"><em><?php echo $service; ?></em></div></div></a>
$('.workBox').hover(function() {
if(clientIsMobilePhone()) return;
$(this).find('.work').css('opacity' , '0.1');
$(this).find('.workTitle').fadeTo(200 ,1);
$(this).find('.landingOffered').velocity({'margin-top': '-5px'}, 200);
}, function() {
if(clientIsMobilePhone()) return;
$(this).find('.work').css('opacity' , '1');
$(this).find('.workTitle').fadeTo(200 , 0);
$(this).find('.landingOffered').velocity({'margin-top': '10px'}, 200);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.