下記のaにマウスオーバーした時に.img-b:beforeのbackgroundを透明若しくは取り消ししたいです。
cssやjqueryでいい方法がありましたら教えてください。
html
1<div class="news"> 2 <div class="h2"> 3 <h2>WHAT'S NEWS</h2> 4 </div> 5 <div class="newsBox"> 6 <div class="newsBox-1 newsB"> 7 <a href=""> 8 <div class="img-b"> 9 <img src="img/news.kei1.jpg"> 10 <h3>FROM KEI<br>2018.10.10</h3> 11 </div> 12 <p>【お知らせ】インタビュー(2回戦終了後)/男子テニスATPワールドツアー マスターズ1000 上海</p> 13 <p>大会第4日、2回戦 ウー・イービンとの戦いに勝利した錦織選手のインタビュー。※日本語は後半部分となります▶錦織圭 インタビュー(2回戦終了後)/男子テニスATPワールドツアー マスターズ1000 上海今すぐ動画をチェック!⇒</p> 14 </a> 15 </div> 16 <div class="newsBox-2 newsB"> 17 <a href=""> 18 <div class="img-b"> 19 <div class="img-box"></div> 20 <h3>RESULT</h3> 21 </div> 22 <p>上海 ロレックス・マスターズ</p> 23 <p>準決勝ロジャー・フェデラー(スイス)</p> 24 </a> 25 </div> 26 <div class="newsBox-3 newsB"> 27 <a href=""> 28 <div class="img-b"> 29 <img src="img/news.kei3.jpg"> 30 <h3>FROM KEI<br>2018.10.06</h3> 31 </div> 32 <p>【お知らせ】インタビュー(準決勝直後オンコート)/楽天ジャパンオープンテニス2018</p> 33 <p>大会第6日、準決勝に勝利し、同大会で4年ぶりの決勝進出を決めた錦織選手の試合直後のインタビュー!難敵リシャール・ガスケ選手との戦いを振り返るとともに、ダブルスに出場している内山選手へエールを送りました。▶錦織圭 インタビュー(準決勝直後オンコート)/楽天ジャパンオープンテニス2018動画をチェック!⇒</p> 34 </a> 35 </div> 36</div>
css
1.img-b { 2 position: relative; 3} 4 5.img-b img { 6 vertical-align: bottom; 7} 8 9 10.img-b:before { 11 content: ''; 12 width: 500px; 13 height: 306px; 14 background: rgb(0,0,0,0.5); 15 position: absolute; 16 top: 0; 17 left: 0; 18
回答2件
あなたの回答
tips
プレビュー