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

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

$（窗口）.on（“加载调整大小”，函数mobileViewUpdate（）{
var viewportWidth=$（窗口）.width（）；
如果（视口宽度

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

似乎（'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();

});

$（文档）.ready（函数（）{
函数checkViewportWidth（）{
var viewportWidth=$（窗口）.width（）；
console.log（viewportWidth）；
if（viewportWidth一个如何通过媒体查询实现这一点的示例（假定悬停效果是通过css实现的）该样式仅在屏幕大小为时有效CSS唯一的方法是在
@media
查询中使用
最小宽度：780px
添加
：hover
CSS，因为您希望在窗口>780px时激发
：hover
效果


@介质（最小宽度：780px）{
div.allHover:hover.stockDesign_图像，
div.allHover:hover.customDesign\u图像{
宽度：360px；
}
div.allHover:hover.prodboxs\u标题{
背景色：#5E3EA6；
}
div.allHover:hover.prodboxs\u headerright{
背景色：#fb8332；
}
div.allHover:hover.viewAll_按钮{
背景位置：0-34px；
}
}
.stockDesign\u图像、.customDesign\u图像{
宽度：340px；
身高：382px；
保证金：30像素自动；
过渡：所有0.2秒缓进缓出；
}
.prodboxs\u标题{
背景色：#4c2e90；
}
.prodboxs_headerright{
背景色：#ff6600；
}
.viewAll_按钮{
背景图片：url（images/VIEW-ALL.png）；
宽度：141px；
高度：34px；
浮动：对；
溢出：隐藏；
位置：相对位置；
利润率：8px 5px 0；
}

从1000多个插入设计中选择
低至$
如果你加载窗口<780px，对我来说似乎很好。对不起，我发现它对我也很好，但是还有一件事我没有提到。所以当你调整窗口780px的大小时，它不会回来。我必须为此添加一些东西吗？你可能只需要一个
其他
条件。顺便说一句，你可以通过媒体查询，我已经了解了所有这些，所以你甚至不需要JS（因为你的悬停效果是通过CSS实现的）。@MichaelCoker谢谢你的工作。但是我在你的JS代码的第6行和第8行收到一个错误，说“$allHover”没有定义。这是我应该关心的问题吗？
@media only screen and (min-width: 780px) {
    .allHover:hover {
...
    }
}

  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");
    }
  }