I need to add a class `:focus` when I click on a product, so before it loads the next page you can see a blue rectangle. 

I have added a jQuery to do it, so when you click a product it changes the class, and add a new class with a box shadow. 

But it only works on desktop not on mobile devices.

```js
$(document).ready(function() {
  $('div.product-container').on('click', function() {
    $(this).addClass('aftertap');
  });
});
```

```css
.aftertap {
  -webkit-box-shadow: 0px 0px 12px 3px rgba(113, 129, 194, 1) !important;
  -moz-box-shadow: 0px 0px 12px 3px rgba(113, 129, 194, 1) !important;
  box-shadow: 0px 0px 12px 3px rgba(113, 129, 194, 1) !important;
}
```

```html
<div class="product-container style1 clearfix" itemscope="" itemtype="http://schema.org/Product">
  <div class="left-block">

    <div class="product-image-container">

      <a class="product_img_link" href="http://localhost/prestawebserver/forward/102-cropped-leggings-performance-cotton.html" title="Cropped Leggings - Performance Cotton" itemprop="url">
        <img class=" img-responsive" src="http://localhost/prestawebserver/1065-home_default/cropped-leggings-performance-cotton.jpg" alt="cropped-leggings-performance-cotton" title="cropped-leggings-performance-cotton" itemprop="image">
      </a>
    </div>
  </div>
```