質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

1961閲覧

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

mm--_--mm

総合スコア113

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/06/25 07:29

編集2019/06/25 07:47

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

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

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

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

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

html

1<div class="list"> 2  <ul> 3 <li><a class="hoge01" href="./test1.html">リンク01</a></li> 4 <li><a class="hoge02" href="./test2.html">リンク02</a></li> 5 <li><a class="hoge03" href="./test3.html">リンク03</a></li> 6 </ul> 7</div>

jquery

1//書き方1 2//この書き方だと同時に全てのリンクの色が変わってしまいます...。 3$("a").on("mouseover", function () { 4  $(".hoge1,.hoge2,.hoge3").css({ color: "#222222" }); 5 6}); 7 8 $("a").on("mouseout", function () { 9 $(".hoge1,.hoge2,.hoge3").css({ color: "#808080" }); 10 }); 11 12 13//書き方2 14//この書き方だとカーソルを乗せたリンクだけ色が変わります。 15$(".hoge1").on("mouseover", function () { 16  $(".hoge1").css({ color: "#222222" }); 17 18}); 19 20$(".hoge2").on("mouseover", function () { 21  $(".hoge2").css({ color: "#222222" }); 22}); 23 24$(".hoge3").on("mouseover", function () { 25  $(".hoge3").css({ color: "#222222" }); 26}); 27 28 29 30 31 32 33 34 35 36 37 38 39

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

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

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

CSS

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

投稿2019/06/25 07:39

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

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

jQuery

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

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

投稿2019/06/25 08:19

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mm--_--mm

2019/06/25 08:27

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

0

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

js

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

投稿2019/06/25 07:35

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mm--_--mm

2019/06/25 07:43

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

2019/06/25 07:45

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問