jQuery新手求助：如何实现悬停.heading或.excerpt时联动修改双方背景样式

现有HTML结构中，每一组.heading和对应.excerpt都隶属于同一个外层包裹div。只要在悬停触发时，顺着当前元素找到这个共同父容器，在容器内定位配对的同组元素，同步加/移除is-hover样式类，就能实现联动效果，全程不需要改动现有HTML和CSS代码。

原逻辑的不足 #

之前的代码仅对当前触发悬停的元素$(this)做类名添加/移除操作，没有定位到同组需要联动的配对元素，因此无法实现双向同步的效果。

可直接替换的JS代码 #

$(document).ready(function(){
  $(".heading, .excerpt").hover(
    // 鼠标进入悬停范围时触发
    function() { 
      // 给当前触发的元素加样式类
      $(this).addClass('is-hover');
      // 取当前元素所属的同组外层容器
      const $groupContainer = $(this).parent();
      // 匹配同组对应的联动元素加类
      if ($(this).hasClass('heading')) {
        $groupContainer.find('.excerpt').addClass('is-hover');
      } else {
        $groupContainer.find('.heading').addClass('is-hover');
      }
    },
    // 鼠标移出悬停范围时触发
    function() { 
      // 移除当前触发元素的样式类
      $(this).removeClass('is-hover');
      // 取当前元素所属的同组外层容器
      const $groupContainer = $(this).parent();
      // 同步移除同组联动元素的样式类
      if ($(this).hasClass('heading')) {
        $groupContainer.find('.excerpt').removeClass('is-hover');
      } else {
        $groupContainer.find('.heading').removeClass('is-hover');
      }
    }
  );
});

方案适配性说明 #

• 元素匹配不会跨组出错：每一组的标题、占位文本、摘要都在同一个独立的外层div里，.parent()取到的容器范围刚好是当前组的内容，不会误匹配其他组的元素
• 完全兼容现有不可修改的代码约束：不需要调整HTML结构，不需要改动原有CSS规则
• 代码逻辑直白易读：没有使用复杂的选择器或高阶语法，每一步操作都可以直观追踪，入门阶段也能快速定位后续要调整的位置

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