ホバー時にアンダーラインを表示させたい。

Question

前提・実現したいこと

jQueryを使って動的なホームページを作っている最中です。
メニューバーの項目をホバーしたら、アンダーラインをスライドさせる方法を教えて頂きたいです。
宜しくお願い致します。

参考にしたサイト

ホバー時のアンダーラインを実装したい

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

以下のコードを書いても、jQueryの動作がブラウザに反映されませんでした。

該当のソースコード

<nav id ="menu">
       <ul>
         <li><a href ="#">ポートフォリオ</a></li>
         <li><a href ="#">お問い合わせ</a></li>
         <li><a href ="#">リンク</a></li>
       </ul>
     </nav>

$(function(){
   $('#menu').hover(function(){
      $('#menu').addClass('underline');
   });

})

#menu {
    width: 100%;
    height: 70px;
    background-color: dimgray;
    position: relative;
    top: 770px;
    box-sizing: border-box;
}

#menu .underline :hover{
    opacity: 1;
    color:red;
    transition: 0.5s;

}
    
#menu .underline :after {
    position: absolute;
    content: '';
    width: 100%;
    height: 1px;
    left: 0;
    opacity: 0;
    
}

#menu ul {
    position: absolute;
    bottom: -9px;
    left: 170px;
    font-size: 25px;
    display: flex;
}
#menu li {
    list-style: none;
    position: relative;
}

#menu a {
    text-decoration: none;
    display: block;
    color: #fff;
    margin-right: 250px;
}

期待した処理結果

addClassメソッドを使ってunderlineクラスを作成後、cssでホバーしたら赤い下線がスライドすると思いました。

試したこと

以下のコードに書き換えても結果は変わりませんでした。

  $(function(){
   
   $('#menu').hover(function(){
      $('#menu').children('')
      $('#menu').css('text-decoration','underline', 'color', 'red')

   })
   
}) 

補足情報（FW/ツールのバージョンなど）

開発環境

• OS ..Mac バージョン10.14.6

• Visual Studio Code バージョン　1.62.3

具体的な動作を図示してください

・メニュー内の[ポートフォリオ、お問い合わせ、リンク]の各項目に、ホバーすると赤の下線が左から右に流れるように実装したいです。

Comments

[yambejp]

> アンダーラインをスライドさせる

具体的な動作を図示してください

[yuzuyuzu3511]

ご意見ありがとうございます。
具体的に図に落とし込むのが難しいので、スクショを貼りました。

[yambejp]

> ホバーすると赤の下線が左から右に流れる

の意味が捉えにくいのですが、サンプル回答してあるので動作があってるか、
違うならどう違うのか補足してください

Answer 1

こういうことでしょうか？

<style>
a{
text-decoration:none;
}
a:hover:before{
content:"";
display:block;
position:absolute;
width:10%;
height:100%;
border-bottom:1px solid red;
animation: bottomBorderSlide 0.5s ;
animation-fill-mode:forwards;
}
div{
width:-moz-fit-content;
width:fit-content;
position:relative;
}

@keyframes bottomBorderSlide{
  from{ width: 0;}
  to  { width:100%;}
}
</style>
<div>
<a href="#">ポートフォリオ</a>
</div>

Comments

[yuzuyuzu3511]

実装できました。
貴重なお時間ありがとうございました。

Answer 2

#menu .underlineというセレクタは、#menu の子要素である .underline という意味です。
一方で、$('#menu').addClass('underline')というコードは、#menu 自身に .underline をつけるという意味です。

ですので、CSSが当たる要素が存在しません。

Comments

[yuzuyuzu3511]

ご回答ありがとうございます。
正直なところ、cssが当たる要素がない理由が言語化できない状況です。

cssファイル内の#menu .underlineを.underlineに書き換えても何も変わりません。
再度検索して理由を明確にするか、できない場合は違う実装を考えてみようと思います。その際は再度コードをこの質問に追加します。

貴重なお時間ありがとうございました。

[Lhankor_Mhy]

正直に申し上げると「全部作り直した方がいいんじゃないかな」と思っていますので、yambejp さんのご回答を参照されるのがいいかと思います。