Question

我已经实现了一个带有悬停效果的侧边栏导航，可以在自定义滑块上从幻灯片跳转到幻灯片，使用简单的jQuery hover（）函数正常工作：

$('#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');
});

但在移动设备上需要进行抛光。

当用户在线上垂直滑动手指时，想法是实时具有相同的悬停效果，使它们长到一边并显示文本。一旦用户发布选项，调用该幻灯片可能会很有趣，但这不是现在的优先事项。更大的问题是当用户将手指滑过元素时如何实现悬停的类似效果......

有什么想法吗？我想过使用'touchmove'，但我不认为我可以判断用户是否超过其中一个选项，甚至是哪一个。

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

示例：https://jsfiddle.net/ac_coding/d7xnndg2/

更新：如果没有正确理解/解释，我在这里尝试实现的是当移动用户触摸屏幕时，桌面上的悬停效果相同，并且不会提升手指，从垂直右边缘移动，盘旋并穿过导航的不同线路/选项，这将触发他们的“悬停”效果。使用touchstart / touchend将要求用户点击导航的不同点以查看选项。

我希望它有意义，似乎不容易解释：S

更新2 ：我似乎终于找到了解决办法，但我现在没有时间。我明天会更新这个问题，为其他人解释。谢谢大家的帮助！

Answer 1

您是否尝试绑定触摸事件？你需要添加＆＃34;悬停效果＆＃34; class（其中：悬停样式）也是你的附加CSS选择器。

$('#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');
});

用户触摸通过导航元素滑动时的悬停效果

1 个答案: