前提・実現したいこと
前回の続きです。
前回、ご回答を頂き、「altを取得すること」が無事成功致しました。
次に、hoverした際にはdivのcssを適用するなどといったhoverした際の処理を行いたいのですが、なぜかhoverさせてもcssが適用されません。
どこが間違っているのかご指導頂けますと幸いです。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
HTML
1<section class="section-title" id="style"> 2 <div class="content-wrapper"> 3<h2 class="section-title">Style</h2> 4<div class="style-wrapper"> 5<ul> 6 7 <li class="style-item"><img src="images/style02-min.jpg" alt="大人キュートなベリーショート" class="style-img"></li> 8 <li class="style-item"><img src="images/style03-min.jpg" alt="かわいくて大人気!甘えんぼなガーリースタイル" class="style-img"></li> 9 <li class="style-item"><img src="images/style04-min.jpg" alt="愛されゆるふわガール" class="style-img"></li> 10 <li class="style-item"><img src="images/style05-min.jpg" alt="ボリューミーで女性らしいシルエット" class="style-img"></li> 11 <li class="style-item"><img src="images/style06-min.jpg" alt="ナチュラル清楚な美人に" class="style-img"></li> 12 <li class="style-item"><img src="images/style07-min.jpg" alt="さっぱりエネルギー溢れる活力のある女性" class="style-img"></li> 13 <li class="style-item"><img src="images/style08-min.jpg" alt="エネルギッシュさにオトナらしさもプラス" class="style-img"></li> 14 <li class="style-item"><img src="images/style09-min.jpg" alt="カントリーチックな最先端スタイル" class="style-img"></li> 15 <li class="style-item"><img src="images/style10-min.jpg" alt="定番のさらさらストレート" class="style-img"></li> 16 <li class="style-item"><img src="images/style11-min.jpg" alt="小動物感漂うふわふわ感癒されること間違いなし" class="style-img"></li> 17 <li class="style-item"><img src="images/style01-min.jpg" alt="お父さんのスタイリングもお任せください" class="style-img"></li> 18</ul> 19</div> 20<a href="#"><img src="images/linesend_black-min.png" alt="" class="line_btn"></a> 21 </div> 22</section> 23
該当のソースコード
CSS
1/*キャプション部分*/ 2/*今はないが後からjQueryにより生成される*/ 3/*今はないがhoverした時に画像の大きさいっぱいに重なる要素になるキャプションを表示するための領域となる*/ 4.style-item{ 5 div{ 6 position:absolute; 7 display: none; 8 width:100%; 9 height:100%; 10 padding:20px; 11 background:rgba(17,179,179,.7); 12 top:0; 13 left:0; 14 box-sizing:border-box;} 15 /*アニメーションように10pxずらしておく*/ 16/*今はないが後からjQueryにより生成される 上記のdivの中に入れるキャプションの本文になる*/ 17p { 18 position:relative; 19 top:10px; 20} 21} 22 23 24 25}
該当のソースコード
javascript
1$(function () { 2 //画像のキャプション表示 3 4 //「style-item」というクラスを持ちかつ、liの最後の要素にdivを追加する 5$("li" + ".style-item").append("<div>"); 6//そのなかにdiv 7$("li" + ".style-item").each(function() { 8//画像のキャプションを取得 9//自分(div)からみて親要素(li)の子要素(img)のalt属性 10//$(this).parent().children("img").attr("alt"); 11//それを取得したキャプション用にテキストをp要素としてdiv要素内におさめる 12 const alt = $(this).children("img").attr("alt"); 13 console.log(alt); 14 $(this).children("div").html("<p>" + alt + "</p>"); 15//$(this).html("<p>" + $(this).parent().children("img").attr("alt") + "</p>"); 16}); 17 //マウスオーバーした時の処理 18 $("li").hover(function () { 19 //マウスオーバー時の処理 20//フェードイン 21 $(this).children("div").stop().fadeIn(300); 22 //キャプションのテキスト位置:10pxから0pxへ移動 23 $(this).children("div").children("p").stop().animate({ "top": 0 }, 300); 24 25 //マウスアウト時の処理 26 }, function () { 27 28 }); 29}); 30
試したこと
■前回同様範囲ミスかと思い、確実に指定できる「style-item」などのクラス名を用いて絞込をした
→変わらない
■もしjs側が悪いとしたら、実はdivがもうliの上に敷かれている状態だから写真の上にhoverしても間にdivが一枚入っているのでhoverできていないことになっていているためcssが適用されない
→試してみたかったが、どうやって検証したらよいかそもそもわからない。
補足情報(FW/ツールのバージョンなど)
OS:Windows
エディタ:VScode
ブラウザ:クローム
###追加修正を受けての追記
追加修正を受けまして、以下のようにしてみたところ、hoverしてもやはり表示されませんでした。
js
1$(function () { 2 //画像のキャプション表示 3 //「style-item」というクラスを持ちかつ、liの最後の要素にdivを追加する 4$("li" + ".style-item").append("<div>"); 5//そのなかにdiv 6$("li" + ".style-item").each(function() { 7//画像のキャプションを取得 8//自分(div)からみて親要素(li)の子要素(img)のalt属性 9//$(this).parent().children("img").attr("alt"); 10//それを取得したキャプション用にテキストをp要素としてdiv要素内におさめる 11 const alt = $(this).children("img").attr("alt"); 12 console.log(alt); 13 $(this).children("div").html("<p>" + alt + "</p>"); 14//$(this).html("<p>" + $(this).parent().children("img").attr("alt") + "</p>"); 15}); 16 //マウスオーバーした時の処理 17 $("li").hover(function () { 18 //マウスオーバー時の処理 19//フェードイン 20 $(this).children("div").stop().fadeIn(300); 21 //キャプションのテキスト位置:10pxから0pxへ移動 22 $(this).children("div").children("p").stop().animate({ "top": 0 }, 300); 23 console.log('hover') 24 //マウスアウト時の処理 25 }, function () { 26 27 }); 28}); 29
回答1件
あなたの回答
tips
プレビュー