写真 画像の上にhoverしたらキャプションを表示させる

Question

前提・実現したいこと

前回の続きです。
前回、ご回答を頂き、「altを取得すること」が無事成功致しました。
次に、hoverした際にはdivのcssを適用するなどといったhoverした際の処理を行いたいのですが、なぜかhoverさせてもcssが適用されません。

どこが間違っているのかご指導頂けますと幸いです。

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

エラーメッセージ

該当のソースコード

<section class="section-title" id="style">
  <div class="content-wrapper">
<h2 class="section-title">Style</h2>
<div class="style-wrapper">
<ul>

  <li class="style-item"><img src="images/style02-min.jpg" alt="大人キュートなベリーショート" class="style-img"></li>
  <li class="style-item"><img src="images/style03-min.jpg" alt="かわいくて大人気！甘えんぼなガーリースタイル" class="style-img"></li>
  <li class="style-item"><img src="images/style04-min.jpg" alt="愛されゆるふわガール" class="style-img"></li>
  <li class="style-item"><img src="images/style05-min.jpg" alt="ボリューミーで女性らしいシルエット" class="style-img"></li>
  <li class="style-item"><img src="images/style06-min.jpg" alt="ナチュラル清楚な美人に" class="style-img"></li>
  <li class="style-item"><img src="images/style07-min.jpg" alt="さっぱりエネルギー溢れる活力のある女性" class="style-img"></li>
  <li class="style-item"><img src="images/style08-min.jpg" alt="エネルギッシュさにオトナらしさもプラス" class="style-img"></li>
  <li class="style-item"><img src="images/style09-min.jpg" alt="カントリーチックな最先端スタイル" class="style-img"></li>
  <li class="style-item"><img src="images/style10-min.jpg" alt="定番のさらさらストレート" class="style-img"></li>
  <li class="style-item"><img src="images/style11-min.jpg" alt="小動物感漂うふわふわ感癒されること間違いなし" class="style-img"></li>
  <li class="style-item"><img src="images/style01-min.jpg" alt="お父さんのスタイリングもお任せください" class="style-img"></li>
</ul>
</div>
<a href="#"><img src="images/linesend_black-min.png" alt="" class="line_btn"></a>
  </div>
</section>

該当のソースコード

/*キャプション部分*/
/*今はないが後からjQueryにより生成される*/
/*今はないがhoverした時に画像の大きさいっぱいに重なる要素になるキャプションを表示するための領域となる*/
.style-item{
    div{
        position:absolute;
        display: none;
        width:100%;
        height:100%;
        padding:20px;
        background:rgba(17,179,179,.7);
        top:0;
    left:0;
    box-sizing:border-box;}
    /*アニメーションように10pxずらしておく*/
/*今はないが後からjQueryにより生成される 上記のdivの中に入れるキャプションの本文になる*/
p {
    position:relative;
    top:10px;
}
}



}

該当のソースコード

$(function () {
    //画像のキャプション表示

    //「style-item」というクラスを持ちかつ、liの最後の要素にdivを追加する
$("li" + ".style-item").append("<div>");
//そのなかにdiv
$("li" + ".style-item").each(function() {
//画像のキャプションを取得
//自分(div)からみて親要素(li)の子要素(img)のalt属性
//$(this).parent().children("img").attr("alt");
//それを取得したキャプション用にテキストをp要素としてdiv要素内におさめる
    const alt = $(this).children("img").attr("alt");
    console.log(alt);
    $(this).children("div").html("<p>" + alt + "</p>");
//$(this).html("<p>" + $(this).parent().children("img").attr("alt") + "</p>");
});
        //マウスオーバーした時の処理
    $("li").hover(function () {
        //マウスオーバー時の処理
//フェードイン
        $(this).children("div").stop().fadeIn(300);
        //キャプションのテキスト位置:10pxから0pxへ移動
        $(this).children("div").children("p").stop().animate({ "top": 0 }, 300);
       
        //マウスアウト時の処理
    }, function () {
        
    }); 
});

試したこと

■前回同様範囲ミスかと思い、確実に指定できる「style-item」などのクラス名を用いて絞込をした
→変わらない

■もしjs側が悪いとしたら、実はdivがもうliの上に敷かれている状態だから写真の上にhoverしても間にdivが一枚入っているのでhoverできていないことになっていているためcssが適用されない
→試してみたかったが、どうやって検証したらよいかそもそもわからない。

補足情報（FW/ツールのバージョンなど）

OS:Windows
エディタ:VScode
ブラウザ:クローム

###追加修正を受けての追記
追加修正を受けまして、以下のようにしてみたところ、hoverしてもやはり表示されませんでした。

$(function () {
    //画像のキャプション表示
    //「style-item」というクラスを持ちかつ、liの最後の要素にdivを追加する
$("li" + ".style-item").append("<div>");
//そのなかにdiv
$("li" + ".style-item").each(function() {
//画像のキャプションを取得
//自分(div)からみて親要素(li)の子要素(img)のalt属性
//$(this).parent().children("img").attr("alt");
//それを取得したキャプション用にテキストをp要素としてdiv要素内におさめる
    const alt = $(this).children("img").attr("alt");
    console.log(alt);
    $(this).children("div").html("<p>" + alt + "</p>");
//$(this).html("<p>" + $(this).parent().children("img").attr("alt") + "</p>");
});
        //マウスオーバーした時の処理
    $("li").hover(function () {
        //マウスオーバー時の処理
//フェードイン
        $(this).children("div").stop().fadeIn(300);
        //キャプションのテキスト位置:10pxから0pxへ移動
        $(this).children("div").children("p").stop().animate({ "top": 0 }, 300);
        console.log('hover')
        //マウスアウト時の処理
    }, function () {
        
    }); 
});

Comments

[k_a]

前回の質問から来ました。

私の環境だとホバー時に前面に水色のdivとaltの文字が入ったpが出てくるのですが、他の場所にミスはありませんか？

` $("li").hover(function () {})`内で`console.log('hover')`等をした場合は出力されますか？
多分出力されると思いますが、それならhover自体は出来ています

[mitrasi]

hoverしても特に何もありませんでした。
console.log()に変化があるかどうかということでしょうか？

[k_a]

凄く基礎的な質問で失礼になるかもしれませんが、ブラウザの開発者ツールはわかりますか？
console.log()で出力した文字は開発者ツールの`Console`タブに表示されます。

[mitrasi]

いえ、大丈夫です。
存じ上げております。ですが、conosoleにはhoverするしないに関わらず取得したalt内容が最初から表示されておりますのでhoverして出てきたかどうかは分かりかねます。

[k_a]

'hover'という文字は出ませんか？
邪魔なら`console.log(alt);`は消しちゃったほうがいいかもしれません。

別々の環境でやり取りしてても不毛なので、こちらを共有します。
https://jsfiddle.net/k4a_/kdvatuxz/
参考にしてください。

[mitrasi]

はい、変わらず特に表示されません????

拝見させて頂きました。
とりあえずしばらくはこちらを参考に原因を探してみたいと思います。
わざわざありがとうございます。

Answer 1

キャプション付きの画像がほしいときはaltではなくfigure/figcaptionで
やると効率的です。

<style>
figure:not(:hover) figcaption{
display:none;
}
figure{
position:relative;
display:inline-block;
margin:0px;
}
figcaption{
font-size:0.7em;
position:absolute;
bottom:20px;
left:0px;
color:#ffffff;
background:rgba(0,0,0,0.6);
width:100%;
padding:1em 0px;
text-align:center
}
</style>
<figure>
<img src="images/style02-min.jpg" alt="大人キュートなベリーショート" class="style-img" width="200" height="150">
<figcaption>大人キュートなベリーショート</figcaption>
</figure>