jquery - .mouseover功能並不總是在移動設備上工作

我目前在我的頁面上有一個css焦點/模糊動畫，這是由jQuery中的一堆mouseover事件觸發的。當在localhost上打開頁面時，動畫在桌面上運行良好，但在我的移動設備上它根本不起作用。jquery - .mouseover功能並不總是在移動設備上工作

在codepen中，例如，當我單擊元素時，動畫在移動設備上工作正常，即使它看起來有點延遲。我想鼠標懸停功能被觸發並解釋爲點擊手機。這是我的codepen項目：http://codepen.io/lcraciun25/pen/GmKEpW

我不明白爲什麼在codepen動畫的作品，並在本地主機沒有。我是一個初學jQuery和任何幫助將不勝感激。

這是我的index.html文件：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Coming Soon Page</title> 
    <style type="text/css"> 

     @import url(https://fonts.googleapis.com/css?family=Raleway:400,300,500,200); 

     html, body { 
      height: 100%; 
     } 

     body { 
      background-color: rgba(0, 0, 0, 0.9); 
      text-align: center; 


     } 

     .bg { 

      position:fixed; 
      top:0; 

      height: 100%; 
      width:100%; 


      background-image: url(http://shrani.si/f/3A/JY/3mEc61r0/vr4v2bqroc.jpg); 
      background-position: center center; 
      background-repeat: no-repeat; 
      background-attachment: fixed; 
      background-size: cover; 
      transform: scale(1.03); 
      z-index: 0; 


      filter: blur(8px); 
      -webkit-filter: blur(8px); 
      transition: all 4000ms; 
     } 

     .content { 
      display: table; 
      position:relative; 
      top:27%; 
      margin: 0 auto; 
      transition: all 4000ms; 
      z-index: 1; 
     } 

     .logo { 
      background: url(http://shrani.si/f/I/Ze/4Qj9jIQ9/logo.png); 
      background-size: cover; 

      z-index: 1; 
      width: 180px; 
      height: 180px; 
      margin: 0 auto; 
     } 

     .text { 
      font-family: Raleway; 
      color: #fff; 
      margin-top: 20px; 
      width: 100%; 
      max-width: 600px; 
      border-radius: 5px; 
      padding-bottom: 32px; 

     } 

     .text p:first-child { 
      font-size: 40px; 
      font-weight: 200; 
     } 

     .text p:nth-child(2) { 
      font-size: 20px; 
      font-weight: 100; 
     } 

     .social { 
      position:relative; 
      text-align: center; 
      bottom:-50%; 
      margin-bottom: 20px; 
      z-index:1; 

      transition: all 4000ms; 
     } 

     .social a { 
      font-family: Raleway; 
      color:white; 
      text-decoration:none; 
      margin-left:5px; 
      margin-right:5px; 
     } 

     .unblurPhoto { 

      filter: blur(0px); 
      -webkit-filter: blur(0px); 
      background-size: cover; 

      transform: scale(1.14); 

     } 

     .blurContent { 
      filter: blur(1.8px); 
      -webkit-filter: blur(1.8px); 

     } 
    </style> 
</head> 

<body> 
    <div class="bg"></div> 
    <div class="content"> 
     <div class="logo"></div> 
     <div class="text"> 
      <p>This is the title</p> 
      <p>Welcome to my beautiful new website. You can find out more about me by scrolling or clicking a button.</p> 
     </div> 
    </div> 

    <div class="social"> 
      <a href="#" target="_blank">UpLabs</a> 
      <a href="#" target="_blank">Behance</a> 
      <a href="#" target="_blank">Linkedin</a> 
    </div> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="script.js"></script> 
</body> 
</html>

這是我的script.js文件：

$(document).ready(function() { 

$('.bg').mouseover(function() { 
    $(this).addClass('unblurPhoto'); 
    $('.content').addClass('blurContent'); 
    $('.social').addClass('blurContent'); 
}); 

$('.content').mouseover(function() { 
    $('.bg').removeClass('unblurPhoto'); 
    $(this).removeClass('blurContent'); 
    $('.social').removeClass('blurContent'); 
}); 

$('.content').mouseover(function() { 
    $('.bg').removeClass('unblurPhoto'); 
    $('.content').removeClass('blurContent'); 
    $(this).removeClass('blurContent'); 
});

}）;

我也看了一些解決方案和這個方法我試過，但它不工作之一：

$('.bg').bind('click touchstart', function() { 
    $(this).addClass('unblurPhoto'); 
});

來源

2017-04-11 Liviu Craciun

'bind（）的'已被棄用，你不應該使用它了。改用'.on'。 – Ionut

bind()已被棄用，你不應該再使用它了。使用.on代替，如：

$('.bg').on('touchstart', function() { 
    $(this).addClass('unblurPhoto'); 
});

此外，您的桌面代碼可能看起來更健壯一點，如：

$('.content, .bg, .social').mouseover(function() { 
    $(this).toggleClass('unblurPhoto blurContent blurContent'); 
});

來源

2017-04-11 14:55:38 Ionut

只有當用戶使用鼠標在工作中的鼠標。在移動設備中，用戶使用觸摸事件。請檢查這個Preferred Alternative to OnMouseOver for touch

來源

2017-04-11 14:18:12 cpap

jquery - .mouseover功能並不總是在移動設備上工作

回答

相關問題