Question

我目前在我的页面上有一个css焦点/模糊动画，这是由jQuery中的一堆mouseover事件触发的。在localhost上打开页面时，动画在桌面上运行正常，但在我的移动设备上它根本不起作用。

在codepen中，当我点击元素时，动画在移动设备上运行正常，即使它似乎有一点延迟。我想鼠标悬停功能被触发并解释为手机上的点击。这是我的codepen项目：http://codepen.io/lcraciun25/pen/GmKEpW

我无法弄清楚为什么在codepen中动画有效并且在localhost上没有。我是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');
});

Answer 1

仅当用户使用鼠标时，鼠标才会工作。在移动设备中，用户使用触摸事件。请查看此Preferred Alternative to OnMouseOver for touch

Answer 2

bind()已弃用，您不应再使用它了。请改用.on，例如：

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

此外，您的桌面代码看起来更健壮，例如：

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

jquery - .mouseover函数并不总是适用于移动设备

2 个答案: