.hover（）在iOS上的怪异行为

Question

我对.hover（）在iOS上的行为方式感到困惑。

在桌面上，我有作品集图库图像，这些图像链接到我的作品的各个页面。 当您将鼠标悬停在任何图像上时，它会略微褪色，并且会显示一个标题动画。每当我在手机上查看同一图库时，触摸和淡入淡出都会发生，但直到再次点击它时，我才进入工作登录页面。 似乎卡在了悬停中。有什么想法吗？

我知道一旦进入移动断点就可以检查浏览器的宽度并禁用悬停功能，但我希望此功能在桌面浏览器上仍然可用。 仅在可能的情况下，我才可以完全消除移动设备中的悬停行为。

我的代码：

/*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); 
 });

Answer 1

您可以检查客户端是否是带有直截了当的检查的手机，如下所示：

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);
}

然后执行以下操作：

/*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); 
 });