jQuery函数运行时不应该运行

Question

我有一个应该在$(document).ready和$(window).resize上运行的函数。设置页面的宽度＆gt;时不加载767px。但是，当页面大小调整为小于767px或从767px或更低开始然后调整大小大于767px时，由于某种原因，类active-hover仍在应用于悬停。有什么想法吗？

function portfolioResizeHover() {
  var screenWidth = $(document).width();

  if (screenWidth <= 767) {
    $('.portfolio-display-box').hover(function () {
      // remove Class if there is an element with class already applied
      $('.active-hover').removeClass('active-hover');
      // Apply your class to this
      $(this).addClass('active-hover');
    });
  } else {
    $('.portfolio-display-box').removeClass('active-hover');
  }
}
$(document).ready(portfolioResizeHover);
$(window).resize(portfolioResizeHover);