javscript の matchMediaをaddListnerで呼び出した際の挙動について

javascript (with jQuery)で下記を書き、ページをロード後リサイズすると、
addClass('className') removeClass('className')　は期待通り、サイズによってクラスの追加削除ができるのですが、
hover()については、ページロード時の挙動がリサイズ後も引き継がれます。

「リサイズがかかるごとに、if文を見に行っている」＝「リサイズのごとに hoverの挙動もそのたび適応され直す」
のかと思ったのですが、overwriteなのですね。。。

  mqFunc = function(mql) {
    if (mql.matches) {
      $('body').addClass('className');

      $('header .item').hover(function() {
        $(this).css('width', '2em')
      }, function() {
        $(this).css('width', '')
      });

    } else {
      $('body').removeClass('className');
    }
  }


  const mql = window.matchMedia('(max-width: 720px)');
  mqFunc(mql);
  mql.addListener(mqFunc);