Javascript 当用户使用浏览器的“后退”按钮时，如何删除css类

我已经建立了一个带有悬停效果的WPbakery自定义网格，在悬停时显示覆盖和附加文本。 从我看到的代码中，css类vc_is-hover是在鼠标悬停时添加的。一切都按预期进行

但是，当手机（iPhone）上的用户单击该元素（这样他就可以看到文章）然后使用浏览器的后退按钮时，仍然会显示覆盖图。 所以我假设vc_is-hover类仍然被设置

我尝试添加此代码以在加载文档时删除css类，但不起作用：

jQuery( document ).ready(function() {
    jQuery(".vc_grid-item-mini").removeClass( "vc_is-hover" );
});

---

我认为在返回或重新加载页面时删除类是错误的方法。我认为课堂不应该停留在第一位

尝试使用jQuery

touchStart

和

touchEnd

侦听器：

<div class="background">
  <p>
    Test
  </p>
</div>

---

jsiddle:

带有一行JS代码：

toggleClass

方法

$（.background p”）.on（'mousedown mouseup'，function（）{
$（this.toggleClass（“突出显示”）；
});
。突出显示{
背景颜色：蓝色；
}


试验

尝试捕获注释中提到的事件。谢谢，这让我看到了这篇文章：通过这段代码，我可以删除类，但只有在第一次使用“后退”按钮时：
$（window）.bind（“pageshow”，function（event）{if（event.originalEvent.persisted）{jQuery（.vc_grid-item-mini”）.removeClass（“vc_is-hover”）}）;
.toggle {
  background-color: blue;
}

$(function() {
  $(".background").on('mousedown touchstart', function() {
    $(this).addClass("toggle");
  }).on('mouseup mouseleave touchend', function() {
    $(this).removeClass("toggle");
  })
});