Hover accessible et touch friendly

index.html

<div id="wrapper">
  <div class="foo">
    <span class="bar"></span>
  </div>
  <div class="foo">
    <span class="bar"></span>
  </div>
  <div class="foo">
    <span class="bar"></span>
  </div>
  <div class="foo">
    <span class="bar"></span>
  </div>
  
</div>

script.js

if(Modernizr.touch) {
     $('#wrapper').on('click', 'div.foo', function(e) {
          $(e.currentTarget).toggleClass('hover');
     });
}

style.css

.no-js .foo:hover .bar,
.no-touch .foo:hover .bar,
.touch .foo.hover .bar {
  /*les styles du hover*/
}