使用jQuery

Question

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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 @media查询中添加min-width: 780px CSS，因为您希望在窗口为＆gt;时触发: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>