jqueryを使用しての複数のクラスにmouseover,mouseoutを一つずつ効かせる書き方について

Question

いつもお世話になっております。

表題の件ですが、複数のリンクにクラスを指定してマウスをリンクの上に乗せると乗せたリンクの文字色だけ色が変わり、離すと色が戻るという機能をjqueryで書きたいと思ってます。

色々と書き方を検証したのですが、一つずつリンクの色を変える書き方だと、下記のコードの書き方２のように量が増えてしまいます。(見栄えも良くない)
そこで効率の良い書き方(綺麗な書き方)(書き方１のようなもの)を知っている方がおりましたら教えていただけると幸いです。
どうぞよろしくお願いいたします。

※追記
開いてるページのリンクはマウスーオーバー、アウトさせずに色は一定にしたいと考えております...。

※コードは下記に載せておきます。

<div class="list">
　　<ul>
      <li><a class="hoge01" href="./test1.html">リンク01</a></li>
      <li><a class="hoge02" href="./test2.html">リンク02</a></li>
      <li><a class="hoge03" href="./test3.html">リンク03</a></li> 
   </ul>
</div>

//書き方１
//この書き方だと同時に全てのリンクの色が変わってしまいます...。
$("a").on("mouseover", function () {
　　$(".hoge1,.hoge2,.hoge3").css({ color: "#222222" });

});

 $("a").on("mouseout", function () {
    $(".hoge1,.hoge2,.hoge3").css({ color: "#808080" });
 });


//書き方２
//この書き方だとカーソルを乗せたリンクだけ色が変わります。
$(".hoge1").on("mouseover", function () {
　　$(".hoge1").css({ color: "#222222" });

});

$(".hoge2").on("mouseover", function () {
　　$(".hoge2").css({ color: "#222222" });
});

$(".hoge3").on("mouseover", function () {
　　$(".hoge3").css({ color: "#222222" });
});

Answer 1

複数のリンクにクラスを指定してマウスをリンクの上に乗せると乗せたリンクの文字色だけ色が変わり、離すと色が戻るという機能をjqueryで書きたいと思ってます。

それでしたら、CSSだけで解決できます。jQueryを使うまでもありません。

.hoge01:hover, .hoge02:hover, .hoge03:hover{
  color: #222222;
}

Answer 2

.hover() を使いたいということでしょうか？

  $('a[href][class]').filter(function(_index, element) {
    return location.href !== element.href;
  }).hover(function(event) {
    $(this).css('color', '#222');
  }, function(event) {
    $(this).css('color', '#808080');
  });

https://api.jquery.com/hover/

Comments

[mm--_--mm]

ご回答いただきありがとうございます。
このソースコードでやりたいことができました...！
hover()という関数で実現できるとは知りませんでした。もっと勉強します！
本当にありがとうございました！！

Answer 3

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

 $("a").on("mouseout", function () {
    $(this).css({ color: "#808080" });
 });

Comments

[mm--_--mm]

ご回答いただきありがとうございます。このやり方だと人ずつ色が変わりました！ですが、開いてるページのリンクはマウスオーバーとマウスアウトを効かせたくないんですよね...。そうした場合はどうしたらよろしうでしょうか..?

[kei344]

要件が変わっています。別の問題なので、新たに質問されてはいかがでしょうか。