如果将类悬停在jquery添加的其他类上，则将其删除

Question

如果仅将鼠标悬停在具有.menu__subcategory--inactive类的li上，则需要删除子类中的subactive类。

将此类悬停在父菜单上之后，可能无法正常运行。

请帮助修复此错误

$('.megamenu__list li[data-id]').hover(function() {
  var id = $(this).data('id');
  $('.megamenu__subcategory li').addClass('menu__subcategory--inactive').removeClass('menu__subcategory--child').filter(function() {
      return (',' + $(this).data('id') + ',').indexOf(',' + id + ',') >= 0;
    })
    .addClass('menu__subcategory--child').removeClass('menu__subcategory--inactive');
  $('.megamenu__list li[data-id]').removeClass('menu__list--active');
  $(this).addClass('menu__list--active');
});


$('.megamenu__subcategory li.menu__subcategory--inactive a').mouseover(function(e) {
  $('.megamenu__subcategory li').removeClass('subactive');
})

.menu__subcategory--active a {
  color: red;
}

.menu__subcategory--inactive a {
  color: grey;
}

.menu__subcategory--child a {
  color: black;
}

.subactive a {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="megamenu__list">
  <li data-id="1"><a href="#">Menu1</a></li>
  <li data-id="2"><a href="#">Menu2</a></li>
  <li data-id="3"><a href="#">Menu3</a></li>
</ul>
<ul class="megamenu__subcategory">
  <li data-id="[1]" class="subactive"><a>menu 1</a></li>
  <li data-id="[2]"><a>menu 2</a></li>
  <li data-id="[3]"><a>menu 3</a></li>
  <li data-id="[1,3]"><a>menu 4</a></li>
  <li data-id="[1,2]"><a>menu 5</a></li>
  <li data-id="[1,3]"><a>menu 6</a></li>
</ul>