Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • jQuery - Removing hover effect in Responsive design

    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 784
    Comment on it

    Hii, As we all know that for mobile and tablet screen hover effect doesn't works so we need to remove all hover effects provided after window screen width 768px.It's very simple using Jquery.Just go through the following steps.

    Step 1:Make sure that all the hover effects you have provided to a particular content is within a class.

    Example:

    div.tab:hover{//properties}  It should be like this.
    
    div:hover{//properties}It should not be like this.
    

    Step 2:Now remove that class within which you have provided hover properties.

    Here's the Jquery Code for removing hover effect:

    $(document).ready(function(){
             $(window).resize(function() {
               $window = $(window);
                 if ($window.width() <= 768) {
                    $("div").addClass("NewTab");  //add a new class 
                   $("div").removeClass("tab"); //remove that class in which you have provided hover effect
                 }
           else {
                $("div").addClass("tab");
               } 
             });
           });
    

 1 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: