flexboxの背景色をa:hover で変えたい

前提・実現したいこと

flexboxの背景色、.flex-item a:hover { color: #000; background: hsla(180,50%,50%,0.7);
が変わらない。
文字は変わる。a:hover で背景色も変えたい。
よろしくお願いします。

発生している問題・エラーメッセージ

変化がない。反応がない。

該当のソースコード

a:hover

CSSここに言語名を入力
ソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>kudamono</title> <style>  </style> </head> <body> <div class="flex-container"> <div class="flex-item"> <a href="#"> <div class="flex-item-inner"> <div class="flex-item-inner-content"> MOMO </div> </div> </a> </div>

<div class="flex-item">   
   <a href="#">
       <div class="flex-item-inner">
           <div class="flex-item-inner-content">
              SAKURANBO
                  </div>
                      </div>
                          </a> 
                             </div>

<div class="flex-item">   
   <a href="#">
       <div class="flex-item-inner">
           <div class="flex-item-inner-content">
              NASHI
                  </div>
                      </div>
                          </a> 
                             </div>

<div class="flex-item">   
   <a href="#">
       <div class="flex-item-inner">
           <div class="flex-item-inner-content">
              ICHIGO
                  </div>
                      </div>
                          </a> 
                             </div>

<div class="flex-item">   
   <a href="#">
       <div class="flex-item-inner">
           <div class="flex-item-inner-content">
              MIKAN
                  </div>
                      </div>
                          </a> 
                             </div>                                                                                                   

<div class="flex-item">   
   <a href="#">
       <div class="flex-item-inner">
           <div class="flex-item-inner-content">
              BANANA
                  </div>
                      </div>
                          </a> 
                             </div>

<div class="flex-item">   
   <a href="#">
       <div class="flex-item-inner">
           <div class="flex-item-inner-content">
              MERON
                  </div>
                      </div>
                          </a> 
                             </div>

<div class="flex-item">   
   <a href="#">
       <div class="flex-item-inner">
           <div class="flex-item-inner-content">
              SUIKA
                  </div>
                      </div>
                          </a> 
                             </div>

</div> </body> </html>

kei344

2021/03/19 04:15

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

解決案

.flex-item a:hover のスタイルを指定している部分を下記のように書き換えればホバー時に背景色が指定の色に変わるようになります。

CSS
1.flex-item .flex-item-inner:hover {  
2  color: #000; background: hsla(180,50%,50%,0.7);
3}

解説

shinkansenさんのコードで背景色が変わらないのは、指定している<a>は高さや幅を持っていないからです。
ブラウザのデベロッパーツールを用いて見てみるとわかりますが、該当の<a>はheightもwidthも0になっています。

背景の面積が0な要素の背景色を変えても意味がありませんから、<a>の子要素でちゃんと面積を持っているflex-item-innerの背景色をホバー時に変えるようにスタイル指定をすればOKということになります。