用户触摸导航元素时的悬停效果

Question

I've implemented a sidebar navigation with a hover effect to jump from slide to slide on a custom slider which is working fine using a simple jQuery hover() function:

$('#slider-nav ul li').hover(function() {
  $(this).prev().addClass('hover-sib');
  $(this).next().addClass('hover-sib');
}, function(e) {
  $(this).prev().removeClass('hover-sib');
  $(this).next().removeClass('hover-sib');
});

but on mobile it would need to be polished.

The idea is to have the same hover effect on real time while the user slides the finger vertically over the lines, making them grow to the side and the text to appear. Once the user releases on an option it could be interesting to call that slide, but that is not the priority right now. The bigger issue is how to achieve the similar effect of a hover when a user slide the finger through the element...

Any idea? I thought on using 'touchmove' but I don't think that I could tell if the user is over one of those options or even which one of them.

$('#slider-nav ul li').bind('touchmove',function(){
    $(this).prev().addClass('hover-sib');
    $(this).next().addClass('hover-sib');
});

Sample: https://jsfiddle.net/ac_coding/d7xnndg2/

---

UPDATE : In case it wasn't properly understood/explained, what I'm trying to achieve here is the same hover effect on a desktop when a mobile user touches the screen and, without lifting the finger, moves from along the vertical right edge, hovering and passing through different lines/options of the nav which would be triggering their "hover" effect. Using touchstart/touchend will require the user to tap at different points of the nav in order to see the options.

I hope it makes sense, doesn't seem easy to explain :S

---

UPDATE 2 : It seems that I finally found a solution but I don't have the time now. I'll update this question tomorrow explaining it for everyone else. Thanks everybody for your help!

Answer 1

Did you try to bind to the touch event? You need to add "hover-effect" class (where :hover styles are) as your additional CSS selector as well.

$('#slider-nav ul li').bind('touchstart', function() {
  $(this).addClass('hover-effect');
  $(this).prev().addClass('hover-sib');
  $(this).next().addClass('hover-sib');
});

$('#slider-nav ul li').bind('touchend', function() {
  $(this).removeClass('hover-effect');
  $(this).prev().removeClass('hover-sib');
  $(this).next().removeClass('hover-sib');
});