jQueryで複数の同じclass属性の要素からマウスホバーされたもの1つだけを選択する

開発環境は、Windows 7 Professional(32bit) + Firefox 58.0.2(32bit)です。

複数の同じclass属性のボタン要素があったときに、どこか1箇所にマウスホバーすると同じclass属性の全部のボタンが変化してしまいます。それを防いで、マウスホバーした1箇所のみ変化させる方法はないのか調べたところありました。

jQueryのindexメソッドを使って何番目の要素なのかを取得して、eqメソッドでその番号の要素のみを変化させるという仕組みです。

使用したjQueryは、jquery-3.2.1.min.jsです。

test.htm

<input type="button" value="ホバーして" class="btns">
<input type="button" value="ホバーして" class="btns">
<input type="button" value="ホバーして" class="btns">

test.js

$(function(){

	$('.btns').hover(
		function(){
			var i = $('.btns').index(this);
			$('.btns').eq(i).css('font-weight','bold');
		},
		function(){
			var i = $('.btns').index(this);
			$('.btns').eq(i).css('font-weight','normal');
		}
	);
});

参考リンク
jQueryでクリックされた要素が何番目か取得する - Qiita