javascript - 当用户使用浏览器的后退按钮时如何删除 css 类

Question

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

但是，当移动电话 (iPhone) 上的用户单击该元素(因此他进入文章)，然后使用浏览器的后退按钮时，仍然会显示叠加层。 所以我假设 vc_is-hover 类仍然设置。

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

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

Answer 1

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

尝试使用 jQuery touchStart 和 touchEnd 监听器:

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

.toggle {
  background-color: blue;
}

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

JSFiddle:https://jsfiddle.net/ht2n3uv8/