jsで下線が追尾するメニューで下線を元の場所に戻すには？

Question

前提・実現したいこと

jsで下線がスライドして追尾するメニューを作りました
追加機能としてマウスのホバーが外れた時にカレントのある場所に下線を戻すようにしたいのですが
どうすればよいでしょうか

参考ページ

https://digipress.digi-state.com/tech/menu-with-underline-sliding-animation/

内容

<div id="g_menu">
 <ul>
  <li class="current"><a href="#" title="ホーム"><img src="img/g_menu01.png" width="45" height="20" alt="ホーム"></a></li>
  <li><a href="#"><img src="img/g_menu02.png" width="67" height="20" alt="下層ページ1"></a></li>
  <li><a href="#"><img src="img/g_menu03.png" width="67" height="20" alt="下層ページ2"></a></li>
  <li><a href="#"><img src="img/g_menu04.png" width="67" height="20" alt="下層ページ3"></a></li>
  <li><a href="#"><img src="img/g_menu05.png" width="67" height="20" alt="下層ページ4"></a></li>
 </ul>
</div>

 #g_menu {
	width:649px;
	height:20px;
	padding:0;
	margin:85px 0 0;
	float: right;
	position:relative;
}
#g_menu ul {
	overflow: hidden;
}
#g_menu ul li {
	float: left;
	list-style:none;
}
#g_menu span{
	background-color:#ED7100;
	width:50px;
	height:2px;
	display:block;
	position: absolute;
	left:0px;
	top:-15px;
   -webkit-transform: translate3d(0,0,0);
}

jQuery(function( $ ) {
	// 初期位置へ移動
	$('#g_menu span').css({ 
		width: $('#g_menu .current').outerWidth(),
		left: $('#g_menu .current').position().left 
	});
	// マウスオーバーでアニメーション
	$('#g_menu a').mouseover(function(){
		$('#g_menu span').stop().animate({
			width: $(this).outerWidth(),
			left: $(this).position().left}
		,'fast');
	});
});

Answer 1

「ホバーが外れた時にカレントのある場所にメニューに戻る」が
ちょっと難解な表現で何をどうしたいのかよくわかりません

ホバーの処理をjavascriptで実装するなら
mouseoverに対してmouseoutが必要になるのでは？
もしくはhoverで処理を列記するかです。

sample

$(function(){
  $('#hoge').hover(
    function(){
      $(this).css("color","red");
    },
    function(){
      $(this).css("color","");
    },
    );
  $('#fuga').on({
    "mouseover":function(){
      $(this).css("color","blue");
    },
    "mouseout":function(){
      $(this).css("color","");
    },
  });
});

<div id="hoge">#hoge</div>
<div id="fuga">#fuga</div>

追記

ちょっと考え直しました。こんな感じですか？

$(function(){
  $('.current').css("background-Color","red");
  $('#g_menu li').on('mouseover',function(){
    $(this).css("background-Color","red").siblings().css("background-Color","");
  });
  $('#g_menu ul').on('mouseout',function(){
    $(this).find('.current').css("background-Color","red").siblings().css("background-Color","");
  });
});

<div id="g_menu">
<ul>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>

Comments

[bohemiantt]

すいません日本語がちょっとおかしいですね、、
「ホバーが外れた時にカレントのある場所に下線を戻す」ということなんですが、

具体的には下記ページの「ホバーが外れた時」の内容です
https://digipress.digi-state.com/tech/menu-with-underline-sliding-animation/

おっしゃるようにmouseoutの指示を加えたらできそうなんですが、、

[yambejp]

調整してみました

Answer 2

yambejpさんの回答を参考に思った動き変更できました

jQuery(function( $ ) {
	// 初期位置へ移動
	$('#g_menu span').css({ 
		width: $('#g_menu .current').outerWidth(),
		left: $('#g_menu .current').position().left 
	});
	// マウスオーバーでアニメーション
	$('#g_menu a').mouseover(function(){
		$('#g_menu span').stop().animate({
			width: $(this).outerWidth(),
			left: $(this).position().left},'fast');
	// マウスアウト
	}).mouseout(function(){
		$('#g_menu span').stop().animate({
		width: $('#g_menu .current').outerWidth(),
		left: $('#g_menu .current').position().left},'fast');
	});
});

Answer 3

直接的な答えじゃないけれど, 試しに作ってみた.
yambejpさんがおっしゃっているとおり, カーソルが外れた際の処理を記述する必要があります.

<ul id="list">
	<li data-row="1">あいうえお</li>
	<li data-row="2">かきくけこ</li>
	<li data-row="3">さしすせそ</li>
	<li data-row="4">たちつてと</li>
	<li data-row="5">なにぬねの</li>
</ul>

ul{
	--height: 1.5em;
	--row: 1;/*初期位置*/
	background-image: linear-gradient(black, black);
	background-size: 100% 1px;
	background-repeat: no-repeat;
	transition: background-position-y 0.5s ease;
	background-position-y: calc(var(--height)*var(--row) - 1px);
}
li{
	height: var(--height);
}
li:hover{
	color: red;
}

"use strict";
{
	list.onmouseover = e => 
		e.target.dataset.row && list.style.setProperty("--row", e.target.dataset.row);
	list.onmouseleave = e => 
		list.style.removeProperty("--row");
}