お疲れ様です
htmlを用いて以下のようなページを書きました
(相も変わらずクソコードですが)
このコードのcssの一番最後の部分で、画像にhoverすると、説明「ああああ」が消えるようにしたいのですが、なかなか実現しません。
どなたかお力添えいただければなと思っています。
javascriptも使えなくはないのですが使うと負けたような気がするので意地を張っています
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <style media="screen"> 6 7 8 .member{ 9 min-width: 1300px; 10 background-color:green; 11 background-size: cover; 12 height:1500px; 13 } 14 .container{ 15 width:100%; 16 padding-top:50px; 17 } 18 19 .member-list{ 20 width:1300px; 21 height:600px; 22 background-color: rgba(0,0,0,0.5); 23 border:2px rgb(0,0,255) solid; 24 margin:30px auto; 25 position:relative; 26 } 27 28 .member-img{ 29 background-color: black; 30 width:100px; 31 border:2px rgb(0,0,255) solid; 32 } 33 34 .member-img:hover{ 35 position: relative; 36 width:120px; 37 z-index: 10; 38 } 39 40 .member-list li{ 41 list-style: none; 42 height:90px; 43 } 44 45 46 .member-explain{ 47 width:950px; 48 height:450px; 49 border:2px rgb(0,0,255) solid; 50 position:absolute; 51 top:16px; 52 left:200px; 53 color:white; 54 padding:50px; 55 } 56 57 .img0:hover + .exp0{ 58 display: none; 59 }/*ここがきかない*/ 60 61 </style> 62 </head> 63 <body> 64 65 <div class="member"> 66 <div class="container"> 67 <div class="member-list"> 68 <ul> 69 <li> 70 <img class="member-img img0" src="http://2.bp.blogspot.com/-3o7K8_p8NNM/WGCRsl8GiCI/AAAAAAABAoc/XKnspjvc0YIoOiSRK9HW6wXhtlnZvHQ9QCLcB/s800/pyoko_hashiru.png" alt="ほげほげ"> 71 </li> 72 <div class="member-explain exp0"> 73 <h1>ああああああ</h1> 74 <p>ああああ?</p> 75 </div> 76 77 <li> 78 <img class="member-img img1" src="http://2.bp.blogspot.com/-3o7K8_p8NNM/WGCRsl8GiCI/AAAAAAABAoc/XKnspjvc0YIoOiSRK9HW6wXhtlnZvHQ9QCLcB/s800/pyoko_hashiru.png" alt="ほげほげ"> 79 </li> 80 81 <li> 82 <img class="member-img img2" src="http://2.bp.blogspot.com/-3o7K8_p8NNM/WGCRsl8GiCI/AAAAAAABAoc/XKnspjvc0YIoOiSRK9HW6wXhtlnZvHQ9QCLcB/s800/pyoko_hashiru.png" alt="ほげほげ"> 83 </li> 84 85 <li> 86 <img class="member-img img3" src="http://2.bp.blogspot.com/-3o7K8_p8NNM/WGCRsl8GiCI/AAAAAAABAoc/XKnspjvc0YIoOiSRK9HW6wXhtlnZvHQ9QCLcB/s800/pyoko_hashiru.png" alt="ほげほげ"> 87 </li> 88 89 <li> 90 <img class="member-img img4" src="http://2.bp.blogspot.com/-3o7K8_p8NNM/WGCRsl8GiCI/AAAAAAABAoc/XKnspjvc0YIoOiSRK9HW6wXhtlnZvHQ9QCLcB/s800/pyoko_hashiru.png" alt="ほげほげ"> 91 </li> 92 93 <li> 94 <img class="member-img img5" src="http://2.bp.blogspot.com/-3o7K8_p8NNM/WGCRsl8GiCI/AAAAAAABAoc/XKnspjvc0YIoOiSRK9HW6wXhtlnZvHQ9QCLcB/s800/pyoko_hashiru.png" alt="ほげほげ"> 95 </li> 96 </ul> 97 </div> 98 </div> 99 </div> 100 </body> 101</html> 102
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/06 02:57