bootstrap4 を使用しています。
flexでリストをボックス(大きいメニュー)にし横並びに4つ並べています。
flex内には <li> のリストを作成し <li> 内のテキストを <a>でリンクしています。
それぞれのボックス内の右下にはFontawsomeのアイコンが表示されるようにしています。
hoverでボックス内のすべての背景色を変更したいのですがテキストの背景色のみ変更されている状態です。
html
1 2<ul class="flex-container"> 3 <li class="waku m-arrow1"><a href="">中メニュー1</a></li> 4 <li class="waku m-arrow1"><a href="">中メニュー2</a></li> 5 <li class="waku m-arrow2"><a href="">中メニュー3</a></li> 6 <li class="waku m-arrow3"><a href="">中メニュー4</a></li> 7</ul>
css
1.flex-container{ 2 display: flex; 3 flex-wrap: wrap; 4} 5 6.flex-container li{ 7 margin: 10px; 8 border: 1px solid rgba(0, 0, 0, 0.4); 9} 10 11.m-arrow1, 12.m-arrow2, 13.m-arrow3{ 14 position: relative; 15} 16 17.m-arrow1::before{ 18 position: absolute; 19 bottom: 5px; 20 right: 5px; 21 display: block; 22 font-size:1.2rem; 23 content:'\f35d'; 24 font-family: "Font Awesome 5 Free"; 25 font-weight: 900; 26 color:#f57c00; 27} 28 29.m-arrow2::before{ 30 position: absolute; 31 bottom: 5px; 32 right: 5px; 33 display: block; 34 font-size:1.2rem; 35 content:'\f35d'; 36 font-family: "Font Awesome 5 Free"; 37 font-weight: 900; 38 color:#0091ea; 39} 40 41.m-arrow3::before{ 42 position: absolute; 43 bottom: 5px; 44 right: 5px; 45 display: block; 46 font-size:1.2rem; 47 content:'\f35d'; 48 font-family: "Font Awesome 5 Free"; 49 font-weight: 900; 50 color: #f44336; 51} 52 53.waku{ 54 display:inline-block; 55} 56 57.waku a { 58 display: block; 59 width: 100px; 60 height: 100%; 61 background:#fff; 62} 63 64.waku a:hover{ 65 background:#eff; 66}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/18 05:30
2018/04/18 06:51
2018/04/22 08:09