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功能并不总是在移动设备上工作

回答

相关问题