.newsBox-2はできているのですが、.newsBox-1,3~6がうまくいきません。
リンクにマウスオーバーした時に画像に半透明の黒幕をかけたいのですが、下に潜ってしまっているのか効いていないのか、反応がありません。
よろしくお願いします。
html
1 <div class="newsBox"> 2 <div class="newsBox-1 newsB"> 3 <a href=""> 4 <div class="img-b"> 5 <img src="img/news.kei1.jpg"> 6 <h3>FROM KEI<br>2018.10.10</h3> 7 </div> 8 <p>【お知らせ】インタビュー(2回戦終了後)/男子テニスATPワールドツアー マスターズ1000 上海</p> 9 <p>大会第4日、2回戦 ウー・イービンとの戦いに勝利した錦織選手のインタビュー。※日本語は後半部分となります▶錦織圭 インタビュー(2回戦終了後)/男子テニスATPワールドツアー マスターズ1000 上海今すぐ動画をチェック!⇒</p> 10 </a> 11 </div> 12 <div class="newsBox-2 newsB"> 13 <a href=""> 14 <div class="img-b"> 15 <div class="img-box"></div> 16 <h3>RESULT</h3> 17 </div> 18 <p>上海 ロレックス・マスターズ</p> 19 <p>準決勝ロジャー・フェデラー(スイス)</p> 20 </a> 21 </div> 22 <div class="newsBox-3 newsB"> 23 <a href=""> 24 <div class="img-b"> 25 <img src="img/news.kei3.jpg"> 26 <h3>FROM KEI<br>2018.10.06</h3> 27 </div> 28 <p>【お知らせ】インタビュー(準決勝直後オンコート)/楽天ジャパンオープンテニス2018</p> 29 <p>大会第6日、準決勝に勝利し、同大会で4年ぶりの決勝進出を決めた錦織選手の試合直後のインタビュー!難敵リシャール・ガスケ選手との戦いを振り返るとともに、ダブルスに出場している内山選手へエールを送りました。▶錦織圭 インタビュー(準決勝直後オンコート)/楽天ジャパンオープンテニス2018動画をチェック!⇒</p> 30 </a> 31 </div> 32 <div class="newsBox-4 newsB"> 33 <a href=""> 34 <div class="img-b"> 35 <img src="img/news.kei4.jpg"> 36 <h3>FROM KEI<br>2018.10.06</h3> 37 </div> 38 <p>【お知らせ】インタビュー(準々決勝直後オンコート)/楽天ジャパンオープンテニス2018</p> 39 <p>大会第5日、準々決勝に勝利し、ベスト4進出を決めた錦織選手の試合直後のインタビュー!期待の若手、ステファノス・チチパス選手をストレートで下した、「いいテニスができていた」戦いを振り返りました。▶錦織圭 インタビュー(準々決勝直後オンコート)/楽天ジャパンオープンテニス2018今すぐ動画をチェック!⇒</p> 40 </a> 41 </div> 42 <div class="newsBox-5 newsB"> 43 <a href=""> 44 <div class="img-b"> 45 <img src="img/news.kei5.jpg"> 46 <h3>FROM KEI<br>2018.10.04</h3> 47 </div> 48 <p>【お知らせ】インタビュー(2回戦直後オンコート)/楽天ジャパンオープンテニス2018</p> 49 <p>大会第3日、2回戦に勝利した錦織選手の試合直後のインタビュー!「出だしはむちゃくちゃ良かった」というブノワ・ペール選手との戦いを振り返りました。▶錦織圭 インタビュー(2回戦直後オンコート)/楽天ジャパンオープンテニス2018今すぐ動画をチェック!⇒</p> 50 </a> 51 </div> 52 <div class="newsBox-6 newsB"> 53 <a href=""> 54 <div class="img-b"> 55 <img src="img/news.kei6.jpg"> 56 <h3>FROM KEI<br>2018.10.02</h3> 57 </div> 58 <p>【お知らせ】インタビュー(2回戦直後オンコート)/楽天ジャパンオープンテニス2018</p> 59 <p>大会第1日、1回戦に勝利した錦織選手の試合直後のインタビュー!杉田祐一選手との戦いを振り返りました。▶錦織圭 インタビュー(1回戦直後オンコート)/楽天ジャパンオープンテニス2018今すぐ動画をチェック!⇒</p> 60 </a> 61 </div> 62 </div>
css
1.newsB { 2 width: 500px; 3 height: 500px; 4 background-color: #fff; 5} 6 7.img-box { 8 width: 500px; 9 height: 306px; 10 background-color: #0f5; 11} 12 13.img-b { 14 position: relative; 15} 16 17.img-b img { 18 vertical-align: bottom; 19 20} 21 22.img-b img:after { 23 content: ''; 24 width: 500px; 25 height: 306px; 26 background: rgb(0,0,0,0.5); 27 position: absolute; 28 top: 0; 29 left: 0; 30} 31 32.newsB a:hover .img-b img:after { 33 background: rgb(0,0,0,0.2); 34} 35 36.newsB a:hover .img-box:after { 37 content: ''; 38 width: 500px; 39 height: 306px; 40 position: absolute; 41 top: 0; 42 left: 0; 43 background: rgb(0,0,0,0.5); 44} 45 46h3 { 47 position: absolute; 48 top: 50%; 49 left: 50%; 50 color: #fff; 51}
どんな画像で試しても同じですか?
回答2件
あなたの回答
tips
プレビュー