🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1556閲覧

[JavaScript] 写真にマウスオーバーで対象の名前が出てくるようにしたい

andy23

総合スコア3

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/02/25 04:08

編集2021/02/25 04:22

前提・実現したいこと

JavaScriptで表示されている複数の画像に対して、
画像にマウスオーバーしたら、対象の名前が表示されるシステムを作りたいです。

現在はマウスオーバーしたら、クラスが追加されてスタイルが適用されるところまではできたのですが、
画像と名前を配列化してそれぞれをペアにすることができずに、
行き詰まっています。

JavaScriptの勉強をしながら制作しているので、
JavaScriptでご教授頂けると嬉しいです。

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

const photo = document.getElementsByClassName("photo");
const names = document.getElementsByClassName("name");
for (var i = 0; i < photo.length; i++) {
photo[i].addEventListener("mouseover",function(){
names[i].classList.add('hover');
console.log("a");
の部分で、names[i]の配列を認識してくれません。
names[i]をnames[0]のように数字を入れると認識してくれます。

該当のソースコード

HTML

1<section class="gallery"> 2 <div class="baby_photo"> 3 <p><img src="gallery_contents/baby1.JPG" alt="baby" class="photo"></p> 4 <p class="name">Baby</p> 5 </div> 6 <div class="kids_photo"> 7 <p><img src="gallery_contents/kids1.JPG" alt="kids" class="photo"></p> 8 <p class="name">Kids</p> 9 </div> 10 <div class="portrait"> 11 <p><img src="gallery_contents/portrait1.JPG" alt="portrait" class="photo"></p> 12 <p class="name">Portrait</p> 13 </div> 14 <div class="show"> 15 <p> <img src="gallery_contents/show1.JPG" alt="show" class="photo"></p> 16 <p class="name">Show</p> 17 </div> 18 <div class="nature"> 19 <p><img src="gallery_contents/nature.JPG" alt="nature" class="photo"></p> 20 <p class="name">Nature</p> 21 </div> 22 <div class="food"> 23 <p><img src="gallery_contents/food.JPG" alt="food" class="photo"></p> 24 <p class="name">Food</p> 25 </div> 26 </section>

JavaScript

1<script type="text/javascript"> 2 //photoをホバーさせた時にnameが出てくる処理 3 const photo = document.getElementsByClassName("photo"); 4 const names = document.getElementsByClassName("name"); 5 for (var i = 0; i < photo.length; i++) { 6 photo[i].addEventListener("mouseover",function(){ //ホバーでフェードを取得 7 names[i].classList.add('hover'); //iだと不可 8 console.log("a"); //テスト 後で消す 9 10 this.addEventListener('mouseout', function() { //ホバー解除でフェードを外す 11 this.classList.remove('hover'); 12 }) 13 }) 14 } 15 16 </script>

CSS

1.hover{ /*ホバーされたら*/ 2 transform-origin: top; 3 transform: scale(2.2); 4}

補足情報

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

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

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

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

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

m.ts10806

2021/02/25 04:26

title属性では不足ですか? それとも、ツールチップのような表示を目指しているのでしょうか
guest

回答1

0

ベストアンサー

varlet

投稿2021/02/25 04:49

kei344

総合スコア69596

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

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

andy23

2021/02/25 05:09

簡単なミスでした!ご指摘ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問