同じ名前のクラスが複数ある時に、マウスオーバーしている要素だけstyleを変更したい

Question

前提・実現したいこと

初心者で下記サイトの模写をしております。
https://www.vermicular.jp/

グローバルナビでマウスオーバーした際、トグルメニューが表示されて、
マウスが離れるとふわっと消えるアニメーションを実装したいと思っております。

考え方としては
１．メニューが表示されたらサブメニューのulにdisplay:noneをつける
２．マウスオーバーしたらサブメニューのulをblockに
３．マウスアウトでうっすらと消えたあと、display:noneを再度つける

jsについて、自分なりに情報を集めて組んだのですが、勉強が追いついておらず思うように工夫できません。

マウスオーバーしている要素のみdisplay:を変更したいと思っています。

発生している問題・エラーメッセージ

setTimeout()の部分が最初のメニュー要素にしか効いていない
ホバーされた要素を指定するjsの書き方がわからない

該当のソースコード

<ul class="g-nav">
  <li class="menu">メニュー１
    <ul class="sub-menu-list">
      <li class="sub-menu">サブメニュー1
      </li>
      <li class="sub-menu">サブメニュー2
      </li>
      <li class="sub-menu">サブメニュー3
      </li>
    </ul>
  </li>
  <li class="menu">メニュー２
    <ul class="sub-menu-list">
      <li class="sub-menu">サブメニューA
      </li>
      <li class="sub-menu">サブメニューB
      </li>
      <li class="sub-menu">サブメニューC
      </li>
    </ul>
  </li>
  <li class="menu">メニュー３
    <ul class="sub-menu-list">
      <li class="sub-menu">サブメニュー10
      </li>
      <li class="sub-menu">サブメニュー20
      </li>
      <li class="sub-menu">サブメニュー30
      </li>
    </ul>
  </li>
  
</ul>

@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}
@mixin animation($animation-name) {
  -webkit-animation: $animation-name;
  -moz-animation: $animation-name;
  animation: $animation-name;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

@include keyframes(toggle-menu-slidein){
    0% {
        opacity:0;
        left: -30px;
    }
    100% {
        opacity:1;
        left: 0;
    }
}

@include keyframes(tml-fadeout){
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

li {
    list-style: none;
  }

.g-nav {
  height: 50px;
  display: flex;
  flex-wrap: nowrap;
  .menu{
    width: 200px;
    height: inherit;
    position: relative;
    background-color: aqua;
    .sub-menu-list {
      position: absolute;
      top: 50px;
      left: 0;
      background-color: pink;
      .sub-menu {
        position: relative;
        &:first-child {
                        @include animation(toggle-menu-slidein 1.2s ease-out 0s);
                    }
                    &:nth-child(2) {
                        @include animation(toggle-menu-slidein 1.2s ease-out 0.2s);
                    }
                    &:nth-child(3) {
                        @include animation(toggle-menu-slidein 1.2s ease-out 0.3s);
                    }
      }
    }
  }
  
  }

        .hide { 
            @include animation(tml-fadeout 0.2s ease 0s);
        }

document.addEventListener("DOMContentLoaded", function() {
  var elements = document.getElementsByClassName('sub-menu-list');
  for(i=0;i<elements.length;i++){
    elements[i].style.display = "none";
	}
});


$(function() {

	$('.menu').mouseover(function(e) {

	setTimeout(() => document.querySelector(".sub-menu-list").style.display = "block", 0);
	$('.sub-menu-list').removeClass("hide");
    })

  $('.menu').mouseout(function(e) {
	$('.sub-menu-list').addClass("hide");
	setTimeout(() => document.querySelector(".sub-menu-list").style.display = "none", 200);
	// opacityが0になるタイミングでdisplay:noneを付与する
    })
});

##試したこと

.menu ::hover {
            .sub-menu-list {
                display: block; 
            }
        }

.sub-menu-list {
            display: none;  
}

を追加し、

document.addEventListener("DOMContentLoaded", function() {
  var elements = document.getElementsByClassName('toggle-menu-list');
  for(i=0;i<elements.length;i++){
    elements[i].style.display = "none";
	}
});

setTimeout(() => document.querySelector(".sub-menu-list").style.display = "block", 0);
setTimeout(() => document.querySelector(".sub-menu-list").style.display = "none", 200);

を削除すればいい感じになるのですが、マウスアウトした際に
cssに書かれたsub-menu-listのdisplay: none;に切り替わるのでふわっとした効果が出せません。

いい方法がありましたら、ご教示の程、何卒よろしくお願い申し上げます。

Answer 1

教えていただいた事項をヒントに書き直し、$function(){}の中を下記のように記述したら理想通りに動きました。

 $('.menu').hover(function(e) {
    setTimeout(() => $(this).children('.sub-menu-list').css("display","block"), 0);
    $(this).children('.sub-menu-list').removeClass("hide");
  },
  function(e) {
  	 $('.sub-menu-list').addClass("hide");
    setTimeout(() => $(this).children('.sub-menu-list').css("display","none"), 200);
  })

Answer 2

マウスオーバーしている要素は $(this) で取得できます。また、.sub-menu-list は .menu の子要素ですので、children() で取得できます。
ということで、下記でどうでしょう。

  $('.menu').mouseover(function(e) {
    setTimeout(() => $(this).children().css("display","block"), 0);
    $(this).children().removeClass("hide");
  })

  $('.menu').mouseout(function(e) {
    $('.sub-menu-list').addClass("hide");
    setTimeout(() => $(this).children().css("display","none"), 200);
    // opacityが0になるタイミングでdisplay:noneを付与する
  })

Comments

[kkang]

ありがとうございます！
いただいたスクリプトをヒントに再考したらきれいに動きました。
.mouseoverではなく、.hoverだったようです。

[hatena19]

.mouseover と .mouseout を一つにまとめたのが .hover です。
動作はどちらも同じです。