Javascript 当鼠标指向React Jsx中的相邻元素时，使悬停效果停留在元素中

如果鼠标指针在子菜单中，我试图修复代码以保持悬停效果。 我的目标是，当指针位于子菜单内时，使红色字符和下划线保持不变，如果指针位于菜单项和子菜单外，则不显示

问题： 在鼠标指针离开主菜单项并转到子菜单后，如何在新到达的主菜单项上强制执行悬停事件。在JSX中如何做到这一点？如果没有，JSX中是否还有target:：after伪元素，这样我就可以创建一个条件来呈现样式效果

我需要这样的东西：

if(mouse.is.in.submenu) 
{ 1. I still see main menu item with red characters and the underline
  2. I see the submenu } else {
  Show normal behavior  of onMouseLeave
}

---

通过修复我的JSX代码和CSS样式，使红色下划线保持不变。

重新定位的条件附加类对具有第一级类的li打开

<li className={`${
  this.state.isOpen && this.state.anchorEl === "arrivals" 
  ? "is-open": "" } first-level`}>

注意： *根据我在stackoverflow中的研究，您不能使用JSX*直接针对React中的pseudo:：elements，这回答了我最初的问题，如果我能够控制：在JSX中悬停

.is-open .sub-navigation{
  display: block
}

.is-open .navigation__link, .navigation__link:hover {
  color: #e70033;
}

.is-open .navigation__link:after, .navigation__link:hover:after {
  bottom: 0;
}