我目前在我的页面上有一个css焦点/模糊动画，它是由jQuery中的一堆鼠标悬停事件触发的。在本地主机上打开页面时，动画在桌面上工作正常，但在我的移动设备上它根本不起作用。
例如，在代码笔中，当我单击元素时，动画在移动设备上工作正常，尽管它似乎有一点延迟。我想鼠标悬停功能被触发并解释为移动设备上的点击。这是我的码笔项目：http://codepen.io/lcraciun25/pen/GmKEpW
我无法弄清楚为什么在代码笔中动画有效而在本地主机上不起作用。我是jQuery的初学者，任何帮助将不胜感激。
这是我的索引.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>
这是我的脚本.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');
});
仅当用户使用鼠标时，鼠标悬停才有效。在移动设备中，用户使用触摸事件。请检查此 OnMouseOver 的首选替代方案以获取 touch
bind()已被弃用，您不应该再使用它。请改用.on，例如：
$('.bg').on('touchstart', function() {
$(this).addClass('unblurPhoto');
});
此外，您的桌面代码可能看起来更健壮一些，例如：
$('.content, .bg, .social').mouseover(function() {
$(this).toggleClass('unblurPhoto blurContent blurContent');
});