Flexbox子要素のリンクホバーの背景色の付け方

ここにより詳細な情報を記載してください。

前提・実現したいこと

Flexboxの子要素のbox全体にリンクを指定し、マウスがa:hoverした時にboxの背景色を変えたいです。
よろしくお願いいたします。

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

a:hoverのCSSを記述したつもりですが、ずれてしまいます。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title></title>
6<style>
7<!--
8
9
10
11#main{
12  display: flex;
13  display: -webkit-flex;
14  flex-wrap: wrap;
15  -webkit-flex-wrap: wrap;
16  box-sizing: border-box;
17  overflow: hidden;
18  width : 100%;
19  padding : 10px 10px 0px;
20  background: #fff;
21  margin-bottom : 0px;
22  justify-content: center;
23}
24
25
26.main-fl{
27  display:flex;
28  flex-direction: column;
29  -webkit-align-items: center;
30  -webkit-justify-content: center; 
31  align-items: center;
32  justify-content: center;
33  border-top-width : 1px;border-style : solid;border-color : #f1f1f1;
34  border-left-width : 1px;
35  border-right-width : 1px;
36  border-bottom-width : 1px;
37  margin-left : 10px;
38  margin-right : 10px;
39  margin-top : 10px;
40  margin-bottom : 1.5em;
41  border-radius: 8px;
42  width : 210px;
43  height : 120px;
44  padding-left : 0px;
45  padding-right : 0px;
46  padding-bottom : 0px;
47  text-align : center;
48}
49
50#main a{
51  color : #333333;
52  text-decoration: none;
53}
54
55#main a:hover{
56  margin-left : 10px;
57  margin-right : 10px;
58  margin-top : 10px;
59  margin-bottom : 1.5em;
60  border-radius: 8px;
61  width : 210px;
62  height : 120px;
63  background-color : silver;
64}
65-->
66</style>
67</head>
68<body>
69     <div id="main">
70       <a href="#"><div class="main-fl">test</div></a>
71       <a href="#"><div class="main-fl">test</div></a>
72       <a href="#"><div class="main-fl">test</div></a>
73   </div>
74</body>
75</html>ソースコード

試したこと

下記のCSSを記述しました。
a:hover{
margin-left : 10px;
margin-right : 10px;
margin-top : 10px;
margin-bottom : 1.5em;
border-radius: 8px;
width : 210px;
height : 120px;
background-color : silver;
}

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

このソースだとしたい事はaのhoverじゃなくて、.main-flのhoverじゃないですか？

CSS
1#main a:hover { 
2  margin-left : 10px;
3  margin-right : 10px;
4  margin-top : 10px;
5  margin-bottom : 1.5em;
6  border-radius: 8px;
7  width : 210px;
8  height : 120px;
9  background-color : silver;
10}
11
12/* 上記の部分を全部消して以下を追加する */
13
14#main .main-fl:hover {
15  background-color : silver;
16}

投稿2019/07/01 05:22

編集2019/07/01 05:25

root_jp

総合スコア4666

kurobuta

2019/07/01 06:30

有難うございます。ご指摘の通りCSSの書き方が間違っていました。

kurobuta

2019/07/01 08:02

スミマセン、もう一点教えて頂けないでしょうか？ main-flのboxに初めから background-にolive色を付けたくてCSSを下記に変更しましたが背景色が付きません。よろしくお願いいたします。 #main .main-fl a{ color : #333333; text-decoration: none; background-color : olive; }