列表项悬停显示Div，切换悬停前保持可见的技术方案求助

我来帮你搞定这个悬停交互的问题——核心目标是让选中的quote保持可见，直到你悬停另一个列表项，同时彻底解决切换时的重叠问题。咱们一步步来调整：

1. 调整CSS样式 #

首先修改你的CSS，去掉原来的延迟过渡逻辑，改用更可控的方式处理显示隐藏：

.quote{
  opacity: 0;
  visibility: hidden; /* 确保隐藏时元素不占空间、不可交互 */
  transition: opacity .4s ease; /* 只保留平滑的淡入淡出过渡 */
}
.quote.active{
  opacity: 1;
  visibility: visible;
}

为什么这么改？ 原来的transition: opacity 0s 5s会导致切换时旧quote还在延迟消失，新quote已经出现，从而产生重叠。改用visibility配合opacity，既能保证过渡流畅，又能避免隐藏元素干扰交互。

2. 重写jQuery逻辑 #

把原来逐个绑定hover的代码换成批量处理的方式，同时加入切换时的清理逻辑：

jQuery(document).ready(function($){
  // 用于存储延迟隐藏的定时器
  let quoteHideTimer;

  // 给所有列表项绑定悬停事件
  $(".crops-archive-home li").hover(
    // 鼠标进入列表项时
    function(){
      // 清除之前的延迟隐藏定时器，防止误隐藏
      clearTimeout(quoteHideTimer);
      // 先移除所有quote的active类，确保不会重叠
      $(".quote").removeClass("active");
      // 获取当前列表项的目标类（比如vegetables、bedding-plants）
      const targetClass = $(this).attr("class").split(" ")[0];
      // 给对应类的quote添加active类，显示它
      $(`.quote.${targetClass}`).addClass("active");
    },
    // 鼠标离开列表项时（可选：保持原需求的5秒延迟隐藏）
    function(){
      // 设置5秒后隐藏所有quote
      quoteHideTimer = setTimeout(function(){
        $(".quote").removeClass("active");
      }, 5000);
    }
  );

  // 额外处理：鼠标悬停在quote上时，也要保持显示
  $(".quote").hover(
    function(){
      clearTimeout(quoteHideTimer);
    },
    function(){
      quoteHideTimer = setTimeout(function(){
        $(".quote").removeClass("active");
      }, 5000);
    }
  );
});

关键逻辑说明：

• 鼠标进入任意列表项时，先清除所有延迟隐藏的定时器，再移除所有quote的active类，最后给对应quote添加active——这样就彻底避免了切换时的重叠问题
• 鼠标离开列表项后，会启动5秒的延迟隐藏（和你原来的需求一致），如果这期间悬停另一个列表项，定时器会被立即清除，直接切换显示新的quote
• 新增quote的悬停处理，防止你鼠标移到quote上时，被定时器误隐藏

3. HTML结构无需修改 #

你现有的<ul>和<div class="quote">结构完全可以继续使用，不用做任何调整。

这样修改后，就能实现：悬停列表项时立即显示对应quote，切换时无重叠；quote会保持可见直到你悬停另一个列表项，或者鼠标离开所有列表项/quote后5秒自动隐藏。

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