前提・実現したいこと
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}
補足情報
回答1件
あなたの回答
tips
プレビュー