特定の写真上でのマウスオーバーによる効果

お世話になっております。

今回、解決したい問題は同じclassでしている要素に関して、特定の写真の上に来たらその写真の詳細が表示されるシステムを作ろうと考えています。

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;
					background-image: url("img/member.JPG");
					align-items: flex-end;
					flex-wrap: wrap;
					align-content: flex-end;
					text-align: center;

				}
				.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;
				}

JavaScript

$(function(){
					/*$(".member").hover(
						function () {
							$(".member>div").css("opacity","1");
						},
						function () {
							$(".member>div").css("opacity","0");
						}
					);*/
					var number = $(".member").attr('alt');
					var mouseover_base =$('#member_'+number);
					var mouseover_pic =$('.member_sub');
					$(mouseover_base).mouseover(function () {
						$('mouseover_pic[alt=number]').css("opacity","1");
					});
					$(mouseover_base).mouseout(function () {
						$('mouseover_pic[alt=number]').css("opacity","0");
					});
				});

かなり非常識なコードを書いている自覚はあります。自分なりに考えた仕組みとして
divタグにつけた#member_(数字)についてマウスオーバーで指定。
数字はdivタグ内にあるaltの属性で判断。
そうすると、複数の#member_(数字)ある(他の親要素にもある).member_subについて作用しないよう、.member_subのalt属性と#member_(数字)のalt属性が同じものだけに動作させる
ことによって複数ある.member_subに作用せず、マウスオーバーされた画像のみの.member_subを表示できるかと思ったのですがうまく反応しません。
すこしのヒントでもいただけると助かります。よろしくお願いします。

kei344

2018/05/07 16:03

「写真」のコードも提示してください。

kuroishi

2018/05/07 16:11

写真ですが、CSSにてbackground-imgとして指定している.memberのdiv要素になります。

行動規範の内容に同意します

回答1件

JavaScriptを使う必要が無いような。

CSS
1.member:hover .member_sub{
2	opacity: 1;
3}

追記：

js
1$( ".member" ).hover(
2    function () {
3        $( this ).find( ".member_sub" ).css( "opacity", "1" );
4    },
5    function () {
6        $( this ).find( ".member_sub" ).css( "opacity", "0" );
7    }
8);