懸停效果當用戶觸摸通過NAV元件滑動

Question

我已經實現了一個側邊欄導航與懸停效果從滑動跳躍到在其上工作的罰款使用簡單的jQuery懸停定製滑塊滑動（）函數：

$('#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/

---

UPDATE：如果它沒有被正確的理解/解釋，我想在這裏實現的是一個桌面上的一樣懸停效果，當移動用戶觸摸屏幕，並且在不擡起手指的情況下，沿着垂直右邊緣移動，懸停並通過導航的不同線路/選項，這將觸發其「懸停」效果。 使用touchstart/touchend將需要用戶點擊導航的不同點才能看到選項。

我希望這是有道理的，似乎不容易解釋：S

---

更新2：看來，我終於找到了一個解決方案，但我沒有時間了。明天我會更新這個問題，向其他人解釋它。謝謝大家的幫助！

Answer 1

您是否嘗試綁定觸摸事件？您需要添加「懸停效果」類（其中：懸停樣式）作爲您的附加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'); 
});