Panning gesture hovering HTML elements

Question

How is possible to achieve hovering effect over elements in container via pan gesture?

HTML:

<div class="container">
 <div class="item"></div>
 <div class="item"></div>
 <div class="item"></div>
</div>

Tried Hammer.js, but it not smooth like on gif

var elem = document.getElementById('container');
var hammertime = new Hammer(elem);
hammertime.on('pan', function(ev) {
 if(ev.target.className == 'item') {
   ev.target.style.background='yellow';
 }
});

Effect is similar to any mobile keyboard hovering by finger over letters.

Answer 1

Found solution without hammer.js

$('.bars').on("touchend", function(e){
  $(this).removeClass('bars--active');
  $('.bars__item').removeClass('bars__item--active');
});

$('.bars__item').bind('touchmove', function (evt) {
 $('.bars').addClass('bars--active');
 var touch = evt.originalEvent.touches[0];
 var el = $(document.elementFromPoint(touch.clientX, touch.clientY));

 if (el.hasClass('bars__item')) {
    $('.bars__item').removeClass('bars__item--active');
    el.addClass('bars__item--active');  
 }
});