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

Question

好的，我是jQuery的新手，有点困惑如何在这里实现我的目标。 目标是每当浏览器宽度小于780px时，我都想禁用所有悬停效果。 因此，尽管我已经接近了，但我进行了很多研究，但仍然找不到适合我的特定方法。 以下是jQuery和HTML。 因此，类.allHover是触发悬停效果的原因。 因此，我想在浏览器小于780px时删除悬停效果，因此我将使用.removeClass方法来打破悬停效果。 下面的jQuery代码有效，但是当我将窗口的大小调整为小于780 px，然后刷新浏览器时，悬停效果又回来了，我不希望这样。 有什么我可以添加的，以确保当页面宽度小于780px并刷新页面时，.allHover类不会回来吗？ 先感谢您。

 <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

页面加载时，您还需要调用隐藏功能。 这可以在准备功能中完成。 我将hdiding功能移到fucntion checkViewportWidth并在两种情况下都调用。

似乎在页面刷新时未执行on on('load') 。

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

});

请参阅还Plunker

Answer 2

一个如何通过媒体查询完成此操作的示例（假设悬停效果是使用CSS完成的。）该样式仅在屏幕尺寸小于780时有效。

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

但是，如果您需要将此作为js，则只需添加一个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

仅CSS的方法是将:hover CSS添加到min-width: 780px的@media查询中，因为您希望:hover效果在窗口大于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>