aタグにhoverで背景色を入れたいのですが、うまく反応しません。

aタグそのもの（.information-aではない）にhoverでlightblueの背景色が
映るようにしたいです。
自分でも試験的にa:hover{background-color:lightblue;
opacity:0.6;}と入れましたが、
ページ全体で他の部分のaタグは反応するのに、
此方の部分だけは反応をしませんでした。

HTML5
1				<section class="information">
2					<h2>お知らせ</h2>
3					<div class="information-list">
4						<div class="information-a">
5							<a href="#" class="clearfix">
6								<div class="dl-box01">
7									<div class="date">2013年10月20日</div>
8									<div class="category news">NEWS</div>
9									<p class="sentence">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
10								</div>
11							</a>
12						</div>
13						<div class="information-a">
14							<a href="#" class="clearfix">
15								<div class="dl-box01">
16									<div class="date" >2013年10月20日</div>
17									<div class="category product">PRODUCT</div>
18									<p class="sentence">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
19										テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
20										テキストテキストテキストテキストテキスト</p>
21								</div>
22							</a>
23						</div>
24						<div class="information-a">
25							<a href="#" class="clearfix">
26								<div class="dl-box01">
27									<div class="date">2013年10月20日</div>
28									<div class="category news">NEWS</div>
29									<p class="sentence">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
30								</div>
31							</a>
32						</div>
33						<div class="information-a">
34							<a href="#" class="clearfix">
35								<div class="dl-box01">
36									<div class="date">2013年10月20日</div>
37									<div class="category product">PRODUCT</div>
38									<p class="sentence">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
39										テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
40										テキストテキストテキストテキストテキスト</p>
41								</div>
42							</a>
43						</div>
44					</div>
45				</section>				<section class="information">
46					<h2>お知らせ</h2>
47					<div class="information-list">
48						<div class="information-a">
49							<a href="#" class="clearfix">
50								<div class="dl-box01">
51									<div class="date">2013年10月20日</div>
52									<div class="category news">NEWS</div>
53									<p class="sentence">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
54								</div>
55							</a>
56						</div>
57						<div class="information-a">
58							<a href="#" class="clearfix">
59								<div class="dl-box01">
60									<div class="date" >2013年10月20日</div>
61									<div class="category product">PRODUCT</div>
62									<p class="sentence">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
63										テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
64										テキストテキストテキストテキストテキスト</p>
65								</div>
66							</a>
67						</div>
68						<div class="information-a">
69							<a href="#" class="clearfix">
70								<div class="dl-box01">
71									<div class="date">2013年10月20日</div>
72									<div class="category news">NEWS</div>
73									<p class="sentence">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
74								</div>
75							</a>
76						</div>
77						<div class="information-a">
78							<a href="#" class="clearfix">
79								<div class="dl-box01">
80									<div class="date">2013年10月20日</div>
81									<div class="category product">PRODUCT</div>
82									<p class="sentence">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
83										テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
84										テキストテキストテキストテキストテキスト</p>
85								</div>
86							</a>
87						</div>
88					</div>
89				</section>

CSS3
1.information{
2	width: 960px;
3	margin: 0 auto;
4	padding-top:40px;
5}
6
7.information h2{
8	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
9	text-align: center;
10	margin: 0 auto 50px;
11}
12
13.information-a{
14	display: block;
15	color: black;
16	border-bottom: dotted 1px black;
17}
18
19.information-list a{
20	color :black;
21}
22
23.information-list a:hover{
24	background-color: lightblue;
25	opacity: 0.6;
26}←★ここです！
27
28.information-a a:hover{
29	text-decoration: none;
30}
31
32.information-list{
33	border-top: solid 3px #006699;
34}
35
36.information-list .date{
37	display: block;
38	float: left;
39	width: 100px;
40	font-size: 12px;
41	line-height: 52px;
42}
43
44
45.information-list .category{
46	display: block;
47	float:left;
48	width: 60px;
49	color: white;
50	font-size:10px;
51	line-height: 18px;
52	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
53	background-color: #E24F13;
54	text-align: center;
55	margin: 17px 0 0 25px;
56}
57
58.information-list  .category.news{
59	background-color: #006699; 
60}
61
62.information-list .sentence{
63	display: block;
64	float: left;
65	width: 730px;
66	font-size: 13px;
67	margin: 17px 0 15px 45px;
68}
69

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

回答3件

ベストアンサー

以下追加してみてください

.information-list a{
display:inline-block;
}

投稿2021/07/30 01:30

yambejp

総合スコア116724

別解になりますが、.information-list aをinlineのままで対処したいなら

.information-list a:hover * {
    background-color: lightblue;
    opacity: 0.6;
}

とする手もあります。

投稿2021/07/30 01:39

itagagaki

総合スコア8402

clearfix を書いていないからではないですか？

投稿2021/07/30 01:33

Lhankor_Mhy

総合スコア36960

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.35%

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

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

質問する

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

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

aタグにhoverで背景色を入れたいのですが、うまく反応しません。

関連した質問