平移悬停HTML元素的手势

Question

如何通过平移手势实现容器中元素的悬停效果？

HTML：

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

尝试过Hammer.js，但它不像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';
 }
});

效果类似于手指在字母上方悬停的任何移动键盘。

Answer 1

找到没有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');  
 }
});