实现列表鼠标下移激活:hover、上移移除，及前置元素同步hover效果

嘿，这个交互需求挺有意思的！我们没法直接操控:hover伪类来批量控制其他元素，所以用自定义CSS类来模拟hover的背景色变化，搭配jQuery实现方向判断和动态样式切换，具体实现如下：

1. 基础HTML结构 #

先准备好列表的基本结构：

<ul class="linked-hover-list">
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
  <li>列表项 4</li>
  <li>列表项 5</li> <!-- 可按需扩展更多列表项 -->
</ul>

2. CSS样式定义 #

默认样式+模拟hover效果的类，添加过渡动画让颜色变化更顺滑：

.linked-hover-list {
  list-style: none;
  padding: 0;
  width: 220px;
  margin: 0;
}

.linked-hover-list li {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

/* 用这个类模拟:hover的背景色效果 */
.linked-hover-list li.active {
  background-color: #e6f7ff; /* 替换成你需要的hover背景色 */
}

3. jQuery核心逻辑 #

通过跟踪鼠标上一次停留的列表项索引，判断移动方向，动态添加/移除样式类：

$(document).ready(function() {
  let prevIndex = -1; // 记录上一次鼠标停留的列表项索引

  // 监听每个li的鼠标进入事件
  $('.linked-hover-list li').on('mouseenter', function() {
    const currentIndex = $(this).index();
    
    // 判断移动方向：当前索引大于上一个 → 向下移动
    if (currentIndex > prevIndex) {
      // 给当前项及所有前置项添加active类
      $('.linked-hover-list li').slice(0, currentIndex + 1).addClass('active');
    } else {
      // 向上移动时，移除当前项之后所有项的active类
      $('.linked-hover-list li').slice(currentIndex + 1).removeClass('active');
    }

    // 更新上一次的索引记录
    prevIndex = currentIndex;
  });

  // 鼠标离开整个列表时，重置所有状态
  $('.linked-hover-list').on('mouseleave', function() {
    $('.linked-hover-list li').removeClass('active');
    prevIndex = -1;
  });
});

效果验证 #

• 鼠标向下移动到第4个li时，第1-4个li都会同步显示hover背景色；
• 鼠标向上移动到第2个li时，第3、4个li的hover效果会被移除，仅保留第1-2个的效果；
• 鼠标离开整个列表后，所有hover状态清空，恢复初始样式。

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