如何仅为左侧边栏特定类别对应的相邻图片添加点击触发的hover效果

步骤1：补全「精选推荐」模块结构 #

现有代码中Top_Picks容器为空，先补全与其他侧边栏选项一致的结构：

<div className="Offer__Sidebar">
  <div className="Offers_Near_You">
    <img className="Offer__img" src="https://res.cloudinary.com/swiggy/image/upload/fl_lossy,f_auto,q_auto,w_90,h_90/hxizld3pqhnk0smw27sl" />
    <div className="Offer__div">
      <div>Offers Near You</div>
      <p>211 OPTIONS</p>
    </div>
  </div>
  <div className="Top_Picks">
    <img className="Offer__img" src="【这里替换为精选推荐对应的图标地址】" />
    <div className="Offer__div">
      <div>Top Picks</div>
      <p>【对应选项数量】</p>
    </div>
  </div>
  <div className="Whats_New">
    <!-- 后续模块结构同上 -->
  </div>
  <div className="Vegeterian_Options">
    <!-- 后续模块结构同上 -->
  </div>
  <div className="See_All">
    <!-- 后续模块结构同上 -->
  </div>
</div>

步骤2：添加样式与交互逻辑 #

场景1：鼠标悬浮在「精选推荐」区域时仅图片生效 #

使用CSS精准命中目标元素即可，不会影响文本样式：

.Top_Picks:hover .Offer__img {
  /* 此处替换为你需要的悬浮效果，以下为示例 */
  border: 2px solid #fc8019;
  border-radius: 8px;
  transform: scale(1.05);
  transition: all 0.2s ease;
}

场景2：点击「精选推荐」后保持图片选中效果 #

先添加JS绑定点击事件，实现选中状态切换：

const topPicksNode = document.querySelector('.Top_Picks');
topPicksNode.addEventListener('click', () => {
  // 如需排他选中，可先移除所有侧边栏选项的active类
  document.querySelectorAll('.Offer__Sidebar > div').forEach(item => {
    item.classList.remove('active');
  })
  topPicksNode.classList.toggle('active');
})

再添加对应的CSS样式：

.Top_Picks.active .Offer__img {
  /* 此处替换为你需要的选中效果，以下为示例 */
  border: 2px solid #fc8019;
  border-radius: 8px;
  transform: scale(1.05);
  transition: all 0.2s ease;
}

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