如何实现Splide滑块左右区域分别隐藏对应跟随光标导航按钮

我已经实现了Splide滑块的prev/next导航按钮跟随光标移动的功能，但还需要完成以下交互：鼠标悬停在全屏滑块左半部分时隐藏next按钮，悬停在右半部分时隐藏prev按钮。以下是我目前的代码：

$(".splide__arrow--next").html("NEXT");
$(".splide__arrow--prev").html("PREV");

// Hide arrow when cursor is outside the slider
function showArrow() {
   $(".splide__arrow").addClass('show');
}

function hideArrow() {
   $(".splide__arrow").removeClass('show');
}

$(".splide").hover(showArrow, hideArrow);

// Make div follow cursor
$(".splide").bind("mousemove", function(e){
  $(".splide__arrow--next, .splide__arrow--prev").css({
    top: e.pageY - $(".splide__arrow--next, .splide__arrow--prev").height()/2,
    left: e.pageX - $(".splide__arrow--next, .splide__arrow--prev").width()/2
  });
});

解决方案 #

要实现左右半屏的按钮隐藏逻辑，需要在鼠标移动事件中计算滑块的中线位置，根据鼠标所在区域控制对应按钮的显示状态：

$(".splide__arrow--next").html("NEXT");
$(".splide__arrow--prev").html("PREV");

// Hide arrow when cursor is outside the slider
function showArrow() {
   $(".splide__arrow").addClass('show');
}

function hideArrow() {
   $(".splide__arrow").removeClass('show');
}

$(".splide").hover(showArrow, hideArrow);

// Make div follow cursor + 左右区域按钮隐藏逻辑
$(".splide").bind("mousemove", function(e){
  const $slider = $(this);
  const sliderMidX = $slider.offset().left + $slider.width() / 2;
  const mouseX = e.pageX;
  
  // 更新按钮位置
  $(".splide__arrow--next, .splide__arrow--prev").css({
    top: e.pageY - $(".splide__arrow").height()/2,
    left: e.pageX - $(".splide__arrow").width()/2
  });
  
  // 根据鼠标位置控制按钮显示
  if (mouseX < sliderMidX) {
    // 左半屏：显示prev，隐藏next
    $(".splide__arrow--prev").addClass('show');
    $(".splide__arrow--next").removeClass('show');
  } else {
    // 右半屏：显示next，隐藏prev
    $(".splide__arrow--next").addClass('show');
    $(".splide__arrow--prev").removeClass('show');
  }
});

关键改动说明 #

• 计算滑块中线位置：通过$slider.offset().left + $slider.width()/2获取滑块水平方向的中点坐标
• 区域判断：对比鼠标x坐标与中线位置，确定鼠标处于左半还是右半区域
• 精准控制：针对不同区域单独切换prev/next按钮的show类，实现对应按钮的显示或隐藏

内容的提问来源于stack exchange，提问作者Allan Kristiansen