質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

989閲覧

マウスオーバーが反応しない。

tunnel

総合スコア30

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/10/27 13:52

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/10/27 14:15

どんな画像で試しても同じですか?
guest

回答2

0

img:afterなど書かれていますが、img要素は子要素が存在しないため、::after擬似要素はつかえません。

【::after (:after) - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/::after

投稿2018/10/27 14:16

kei344

総合スコア69407

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

imgに擬似要素のafterを付けるのではなく、imgをdivタグで囲ってそのdivにafterを付けると理想な動きが実現されると思いますよ。

投稿2018/10/27 14:21

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問