お世話になっております。
今回は私が書いたコードがうまく反応しないため質問させていただきます。
HTML
<div style="display: flex; align-items: center; justify-content:center; margin-top: 40px; width: 80%; margin-left: auto; margin-right: auto; flex-wrap: wrap;"> <div class="member" id="member_1" alt="1"> <div class="member_sub" alt="1">a</div> <div class="member_sub" alt="1">b</div> <div class="member_sub" alt="1">c</div> </div> <div class="member" id="member_2" alt="2"> <div class="member_sub">a</div> <div class="member_sub">b</div> <div class="member_sub">c</div> </div> <div class="member" id="member_3" alt="3"> <div class="member_sub">a</div> <div class="member_sub">b</div> <div class="member_sub">c</div> </div> <div class="member" id="member_4" alt="4"> <div class="member_sub">a</div> <div class="member_sub">b</div> <div class="member_sub">c</div> </div> <div class="member" id="member_5" alt="5"> <div class="member_sub">a</div> <div class="member_sub">b</div> <div class="member_sub">c</div> </div> </div>
CSS
.member{ width: 250px; height: 250px; display: flex; margin: 10px; background-size: cover; background-position: center; align-items: flex-end; flex-wrap: wrap; align-content: flex-end; text-align: center; background-color: #444; } .member_sub{ width: 100%; height: 30px; background-color: rgba(0,0,0,0.30); color: white; align-items:center; display: flex; justify-content: center; display: block; opacity: 0; }
JS
$(function(){ var number = $(".member").attr('alt'); var mouseover_base =$('#member_'+number); var mouseover_pic =$(mouseover_base>'.member_sub'); $(mouseover_base).mouseover(function () { $(mouseover_pic).css("opacity","1"); }); $(mouseover_base).mouseout(function () { $(mouseover_pic).css("opacity","0"); }); });
このjQueryのコードでは、すべての正方形divで同じid名、class名を振っています。ですが、本来であれば人物の写真をbackground-imageで添付する予定ですが、そこに説明を入れたいと思い、abcを記入しています。ある写真の上で個別に説明が出るように設定したいので、今回JSをこんな風に書きました。altを取得し、mouseover_baseからのプログラムがしっかりと作動していません。
どうすれば、正常に写真の紹介文をopacityを用いて表示できるでしょうか。
個々の親div要素に名前をつけるの難しいです。
また、altが基本的におかしいこともわかってますが、名前をつける意味で使っております。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー