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

Question

好吧，我是 jQuery 的新手，有点困惑如何在这里实现我的目标。目标是每当浏览器宽度小于 780px 时我想禁用所有悬停效果。所以我做了很多研究，但仍然无法找到适合我的具体方法，尽管我已经接近了。下面是 jQuery 和 HTML。所以类 .allHover 是什么触发了悬停效果。所以我想在浏览器小于 780px 时删除悬停效果我会使用 .removeClass 方法来破坏悬停效果。下面的 jQuery 代码有效，但是当我将窗口调整为小于 780 像素然后刷新我的浏览器时，悬停效果又回来了，我不希望这样。当页面宽度小于 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

您还需要在页面加载时调用隐藏功能。这可以在 ready-function 中完成。我将 hdiding 功能移动到函数 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