ホバーをやめたら消えるタブメニューを作りたい

Question

ドットインストールのJavaScriptでタブメニューを作ろうを終了したのですが、クリックしてタブを開く処理でしたのでこれをホバーして開くものにしたいと思い、addEventListenerをclickからmousehoverに変更しました。

しかし、ホバーを外しても常に表示されたままで、改善策もわかりませんでしたので質問させていただきました。どなたか教えていただけると有り難いです。

"use strict";

{
  const menuItems = document.querySelectorAll(".menu li a");
//メニュー項目
  const contents = document.querySelectorAll(".content");
//タブにメニューに表示される内容

  menuItems.forEach((mouseoverItem) => {
    mouseoverItem.addEventListener("mouseover", (e) => {
      e.preventDefault();
      menuItems.forEach((item) => {
        item.classList.remove("active");
      });
      mouseoverItem.classList.add("active");
      contents.forEach((content) => {
        content.classList.remove("active");
      });
      document.getElementById(mouseoverItem.dataset.id).classList.add("active");
//ホバーされたメニュー項目の data-id の値を取得
    });
  });
}

Answer 1

mouseoverのイベントしかないからです。
クリックとは違うので、マウスが離れたときのイベントも必要です。