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

好的，我是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>

最佳答案

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

看来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

关于javascript - 使用jQuery禁用调整大小时的悬停效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44892610/