JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="MenuBar1" class="MenuBarHorizontal MenuBarActive">
  <li>
    <a class="MenuBarItemSubmenu" href="#">個人專區</a>
    <ul class="">
      <li>
        <a href="/ihke0002/ihke1001s01.aspx">基本健康資料</a>
      </li>
    </ul>
  </li>
  <li>
    <a class="MenuBarItemSubmenu" href="#">健康資料</a>
    <ul>
      <li>
        <a href="/ihke0002/ihke2001s01.aspx">門診資料</a>
      </li>
      <li>
        <a href="/ihke0002/ihke2002s01.aspx">牙科健康存摺</a>
      </li>
      <li>
        <a href="/ihke0002/ihke2003s01.aspx">檢驗檢查結果</a>
      </li>
    </ul>
  </li>
  <li>
    <a class="MenuBarItemSubmenu" href="#">疾病評估</a>
    <ul>
      <li>
        <a href="/ihke0002/ihke4001s01.aspx">肝癌風險預測</a>
      </li>
    </ul>
  </li>
  <li>
    <a class="MenuBarItemSubmenu" href="#">下載服務</a>
    <ul>
      <li>
        <a href="/ihke0002/ihke3001s01.aspx">Html格式檔案</a>
      </li>
      <li>
        <a href="/ihke0002/ihke3002s01.aspx">XML格式檔案</a>
      </li>
    </ul>
  </li>

</ul>

JavaScript

$(function() {

	var lastOver;
  $('#MenuBar1').on('mouseover', 'a', function() {
    var $this = $(this).parent().parent().parent();
    
    
    $this.css("color", "red")
    if(typeof lastOver != "undefined"){
     lastOver.css("color", "");
    }
    
    lastOver = $this;
  });
});