How to remove Hover Effect from DIV when mobile device is detected using javascript

Question

I have using redirection-mobile.js for detecting the mobile device. The code for the same is as follows:

 if (screen.width < 574) {
       var ref = document.referrer;
       var urls = new Array("http://127.0.0.1/eflip","http://127.0.0.1/eflip");
       var n = ref.match(urls[0]);
       var m = ref.match(urls[1]);
       if ((m!==null) || (n!==null)) {
       stop;
       }
       else if (ref=='') {
       var r = confirm("Small Display is Detected.\nClick \"OK\" for MOBILE SITE.");
       if (r==true) {

       }
        else {
        stop ;
       }
       }
       else
       {
       window.location = "http://127.0.0.1/eflip";
       }
      }

if (r==true) is the condition to detect the mobile device. Now I want to remove all the hover effects. I have tried $('element').removeClass() , but its not working.

Every Help and Comment will be highly appreciated. Thanks to all in advance :-)

Answer 1

you're talking about removing events or css effects? if css effects, the elegant way to go is via css, instead of removing the css already applied, just set the css :hover inside a media query like so:

@media (min-width: 480px) {
 /*css you want to apply only in desktop */
   a:hover{...}
}

Edit

min-device-width: 480px) {
 /*css you want to apply only in desktop */
   a:hover{...}
}

Answer 2

You can use to Modernizr to detect the type of your browser.

if ( ! Modernizr.touch ) {
    // your desktop effect
}

Answer 3

You should detect viewport using jQuery

jQuery :

    <script type="text/javascript">
    jQuery(document).ready(function(){

    var viewport = jQuery(window).innerWidth();

        if( viewport < 480 )
            {
            // for mobile device
               jQuery('#yourDiv').css({'transform', 'none !important'});
            }
    });
    </script>