前提・実現したいこと
背景画像をホバーした時に、文字も一緒に文字だけホバーした時と同じ仕様にしたいのですが、
現状は、背景画像をホバーした時は、「h2」に使用しているホバーのスタイルが適用できていません。
背景画像をホバーした時も、同様、「h2」以下のようにしたいです。
text-decoration: none;
background-color:rgba(0,0,0,0.7);
text-shadow:none;
color: #FFF;
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
HTML
HTML
1<div class=“test” id=“com”> 2 <ul class=“tt”> 3 <li class="bg1"><a href=“#”><div><h2><em>テキスト1</em><br><span>説明1</span></h2></div></a></li> 4 <li class="bg2"><a href=“#”><div><h2><em>テキスト2</em><br><span>説明2</span></h2></div></a></li> 5 <li class="bg3"><a href=“#”><div><h2><em>テキスト3</em><br><span>説明3</span></h2></div></a></li> 6 </ul> 7 </div>
CSS
CSS
1div.test{ 2 position: relative; 3 width: 100%; 4 height: auto; 5 overflow: hidden; 6} 7#com .tt li { 8 width: 33.33333333333333%; 9} 10.tt li { 11 float: left; 12 height: 176px; 13 overflow: hidden; 14 position: relative; 15} 16 17 .tt li:after{ position: absolute; 18 content: ""; 19 display: block;tt 20 width: 100%; 21 height: 100%; 22 top: 0; 23 -webkit-background-size: cover; 24 -ms-background-size: cover; 25 background-size: cover; 26 -webkit-transition: all 1s ease-out; 27 -ms-transition: all 1s ease-out; 28 transition: all 1s ease-out; 29 } 30.tt li div { 31 text-align: center; 32 width: 100%; 33 height: 176px; 34 display: -webkit-flex; 35 display: flex; 36 -webkit-justify-content: center; 37 justify-content: center; 38 -webkit-align-items: center; 39 align-items: center; 40 transition: .5s; 41 background-color: rgba(255,0,0,0); 42 z-index: 1; 43 position: relative;} 44 45ul.tt h2 { 46 border: #fff 1px solid; 47 text-shadow: #FFF 1px 1px 0px; 48 margin: 5px; 49 padding: 10px 0; 50 transition: .5s; 51 min-width: 280px; 52 font-weight: bold; 53 background-color: rgba(255,255,255,0.60) 54} 55 56ul.tt h2 em { 57 font-size:167%; 58 line-height:1.5em; 59} 60 61 62ul.tt h2 span { 63 font-weight: normal; 64 } 65 66.tt li div::after, .tt li div::before { 67 -webkit-box-sizing: border-box; 68 -moz-box-sizing: border-box; 69 box-sizing: border-box; 70} 71 72.tt .bg1 { 73 background-image: url(../images/A.jpg); 74 background-size: cover;} 75 76.tt .bg2 { 77 background-image: url(../images/B.jpg); 78 background-size: cover; 79} 80 81.tt .bg3 { 82 background-image: url(../images/C.jpg); 83 background-size: cover; 84} 85 86 87 88.tt li div:hover{ 89 background:rgba(0,0,0,0.3); } 90} 91 92 93.tt a { 94 text-decoration: none; 95} 96.tt a:hover { 97 text-decoration: none; 98 background-color:rgba(0,0,0,0.7); 99 color:#fff;text-shadow:none; 100} 101 102#com .tt li div h2:hover{ 103 border:none; 104 background-color:rgba(0,0,0,0.7); 105 color:#fff; 106 text-shadow:none; 107}
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー