外部リンクに設定したhoverが、クリック後も効いたままになる

ちょっと珍しい事象に遭遇しまして、解決に少し手間取りました。

ワードプレスのメニュープラグイン（max-mega-menu）で、ボタンのhoverの処理をしていました。メニューの中に2つほど外部リンクがあったのですが、クリック後クリック元の画面内でマウスを動かすまで、hoverの効果が消えません。これを修正して欲しいとの依頼。max-mega-menuの設定は一旦解除し、自作のCSSを適用させて色々変更してみましたが、うまくいきません。そこでjqueryのhoverを使ってみました。ついでに、メニュー上の現在のページをハイライトさせる部分はCSSで設定しました。

実際のコード

JS

jQuery(document).ready(function($) {
const btn = $("#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1>li.mega-menu-item>a.mega-menu-link");

$(function () {
  btn.hover(
    function () {
      $(this).css('color', '#95c32c');
		$(this).css('border-color', '#95c32c');
    },
    function () {
      $(this).css('color', '#000');
		$(this).css('border-color', '#FFF');
    }
  )
	btn.mousedown(
		function(){
		$(this).css('color', '#000');
		$(this).css('border-color', '#FFF');
		}
	)
});	

CSS

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 li.mega-current-menu-item a.mega-menu-link{
		color:var(--wp--preset--color--green);
		border-color:var(--wp--preset--color--green);
	}