How to remove a css class, when the user uses the back button of browser

Question

I have built a WPbakery custom grid with a hover effect, that displays an overlay and additional text when hovering. From the code I saw, that the css class vc_is-hover is added when hovering over. That all works as intended.

However when an user on a mobile phone (iPhone) clicks on that element (so he gets on the article) and then uses the back button of the browser, the overlay is still displayed. So I assume, that the vc_is-hover class is still set.

I tried to add this code to remove the css class when the document is loaded, but that does not work:

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

Try capturing the event mentioned in [this](https://stackoverflow.com/a/52832879/6422273) comment. — Ms.Tamil, Jul 29 '19 at 14:08
Thanks, this led me to this post: https://stackoverflow.com/a/13123626/11792214 With this code I am able to remove the class but only the first time I use the back button: `$(window).bind("pageshow", function(event) { if (event.originalEvent.persisted) { jQuery(".vc_grid-item-mini").removeClass( "vc_is-hover" ); } });` — bFlow Webdesign, Jul 29 '19 at 14:44

score 2 · Answer 1 · answered Jul 29 '19 at 14:41

I think removing the class on going back or reloading the page is the wrong approach. I think the class should not stay in the first place.

Try to use jQuery touchStart and touchEnd listener:

<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/

score 0 · Answer 2 · answered Jul 29 '19 at 15:29

With One line of JS code: toggleClass method

$( ".background p" ).on('mousedown mouseup', function() {
  $( this ).toggleClass( "highlight" );
});

.highlight {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="background">
  <p>
    Test
  </p>
</div>

How to remove a css class, when the user uses the back button of browser

2 Answers2