平移手势悬停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');  
 }
});

平移手势悬停HTML个元素

Panning gesture hovering HTML elements

html

javascript

pan

gesture

hammer.js