使用jQuery禁用调整大小时的悬停效果

Question

Ok so Im new to jQuery and a little confused how to achieve my goal here. The goal is whenever the browser is less than 780px wide I want to disable all hover effects. So I did a lot of research and still cant figure out a specific way that works for me, though I have come close. Below is the jQuery and HTML. So the class .allHover is what is triggering the hover effects. So I thought to remove the hover effect when the browser is less than 780px I would use a .removeClass method which would break the hover effect. The jQuery code below works, however when I resize the window to less than 780 px then refresh my browser the hover effect comes back and I dont want that. Is there something I can add to ensure the class .allHover doesnt come back when the page is less than 780px wide and the page is refreshed? Thank you in advance.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(window).on("load resize", function mobileViewUpdate() { var viewportWidth = $(window).width(); if (viewportWidth <= 780) { $(".allHover").removeClass("allHover").addClass("gallery-mobile"); } }); </script> <style> .stockDesign_image, .customDesign_image { width: 340px; height: 382px; margin: 30px auto; transition: all 0.2s ease-in-out; } div.allHover:hover .stockDesign_image, div.allHover:hover .customDesign_image { width: 360px; } .prodBoxes_header { background-color: #4c2e90; } div.allHover:hover .prodBoxes_header { background-color: #5E3EA6; } .prodBoxes_headerright { background-color: #ff6600; } div.allHover:hover .prodBoxes_headerright { background-color: #fb8332; } .viewAll_button { background-image: url(images/VIEW-ALL.png); width: 141px; height: 34px; float: right; overflow: hidden; position: relative; margin: 8px 5px 0 0; } div.allHover:hover .viewAll_button { background-position: 0 -34px; } </style> <div class="allHover"> <div class="prodBoxes_header"> <p class="medalHeader_text">CHOOSE FROM<br>1000+Insert designs...</p> </div> <div class="stockDesign_image"></div> <div class="prodBoxes_footer"> <p class="footer_asLOWas">as low as <span class="asLOWas_price">$<?=($prod[1]->sale_price ?: $prod[1]->aslow_price);?></span></p> <div class="viewAll_button"></div> </div> </div> 

Answer 1

You need to call the hiding functionality also when the page is loaded. This can be done in the ready-function. I moved the hdiding funtionality to fucntion checkViewportWidth and call in both cases.

It seems that on('load') is not executed on page refresh.

$(document).ready(function() {

  function checkViewportWidth() {
    var viewportWidth = $(window).width();
     console.log(viewportWidth);
    if (viewportWidth <= 780) {
        $(".allHover").removeClass("allHover").addClass("gallery-mobile");
    }
  }

  $(window).on('load resize', function mobileViewUpdate() {
     checkViewportWidth();
  });

  checkViewportWidth();

});

Please see also Plunker

Answer 2

An example of how to accomplish this with media queries (given the hover effect is done with css.) The style will only work when screen size is <780.

@media only screen and (min-width: 780px) {
    .allHover:hover {
...
    }
}

But if you need this to be js, you'll just need to add an else:

  function checkViewportWidth() {
    var viewportWidth = $(window).width();
     console.log(viewportWidth);
    if (viewportWidth <= 780) {
        $(".allHover").removeClass("allHover").addClass("gallery-mobile");
    }
    else{
        $(".allHover").addClass("allHover").removeClass("gallery-mobile");
    }
  }

Answer 3

A CSS only approach would be to add your :hover CSS in a @media query with min-width: 780px since you want :hover effects to fire when the window is > 780px.

  @media (min-width: 780px) { div.allHover:hover .stockDesign_image, div.allHover:hover .customDesign_image { width: 360px; } div.allHover:hover .prodBoxes_header { background-color: #5E3EA6; } div.allHover:hover .prodBoxes_headerright { background-color: #fb8332; } div.allHover:hover .viewAll_button { background-position: 0 -34px; } } .stockDesign_image, .customDesign_image { width: 340px; height: 382px; margin: 30px auto; transition: all 0.2s ease-in-out; } .prodBoxes_header { background-color: #4c2e90; } .prodBoxes_headerright { background-color: #ff6600; } .viewAll_button { background-image: url(images/VIEW-ALL.png); width: 141px; height: 34px; float: right; overflow: hidden; position: relative; margin: 8px 5px 0 0; } 

 <div class="allHover"> <div class="prodBoxes_header"> <p class="medalHeader_text">CHOOSE FROM<br>1000+Insert designs...</p> </div> <div class="stockDesign_image"></div> <div class="prodBoxes_footer"> <p class="footer_asLOWas">as low as <span class="asLOWas_price">$<?=($prod[1]->sale_price ?: $prod[1]->aslow_price);?></span></p> <div class="viewAll_button"></div> </div> </div>