[英]Weird behavior of .hover() on iOS
我對.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);
});
您可以檢查客戶端是否是帶有直截了當的檢查的手機,如下所示:
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);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.