jquery - .mouseover function doesn't always work on mobile device

Question

I currently have a css focus/blurring animation on my page which is triggered by a bunch of mouseover events in jQuery. When opening the page on localhost the animation works fine on desktop, but on my mobile device it doesn't work at all.

In codepen for example the animation works fine on mobile when I click the elements, even-though it seems to have a bit of delay. I guess the mouseover function is triggered and interpreted as a click on mobile. Here's my codepen project: http://codepen.io/lcraciun25/pen/GmKEpW

I cannot figure out why in codepen the animation works and on localhost doesn't. I am a beginner with jQuery and any help would be much appreciated.

Here's my index.html file:

 <!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>

Here's my script.js file:

$(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');
});

});

I also looked for some solutions and I tried this method but it doesn't work either:

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

`bind()` is deprecated and you shouldn't use it anymore. Use `.on` instead. — Ionut Necula, Apr 11 '17 at 14:50

score 1 · Answer 1 · edited May 23 '17 at 12:25

1

The mouse over work only when a user uses a mouse. In mobile devices the user use touch event. Please check this Preferred Alternative to OnMouseOver for touch

edited May 23 '17 at 12:25

Community

1
1

answered Apr 11 '17 at 14:18

cpap

82
1
4

score 0 · Accepted Answer · answered Apr 11 '17 at 14:55

bind() is deprecated and you shouldn't use it anymore. Use .on instead, like:

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

Also, your code for desktop could look a bit more robust, like:

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

jquery - .mouseover function doesn't always work on mobile device

2 Answers2