Progate html＆css 中級　道場でhoverが効かない

<dvi>タグ内で:hoverが効かない

ProgateにてHTML&CSSの勉強を行っています。

現在HTML&CSSの中級道場を解いている最中です。正否の判定にソースコードは関係ないためコードを自由に書いて問題を解いています。その際、CSSで指定したhoverが効かない症状に困っています。

下記ソースコードにて、<a>要素にカーソルを重ねた際に、透明度を１（不透明）に変更したく、CSSでhoverを使用していますが、カーソルを重ねてもhoverが効きません。
どうやら親の<div>要素が原因のようで、<div>要素をコメントアウトするとhoverが効くようになります。

そこで質問なのですが、

このような問題が発生する原因は何でしょうか？
親の<div>要素を消さずにhoverを効かせる方法はありますでしょうか？

模範解答ではここに<div>要素は入っていないので、そのように倣えばいいわけですが、気になってしまいました。
よろしくお願いいたします。

該当のソースコード

HTML
1<!-- 問題の部分だけ抜き出してます -->
2<html>
3...
4　<body>
5  ...
6  　　<div class="top-contents-icon">　<!-- この<div>要素が原因らしい -->
7      <a class="btn signup" href="#">新規登録はこちら</a>
8      <p>or</p>
9      <a class="btn facebook" href="#"><span class="fa fa-facebook"></span>Facebookで登録</a>
10      <a class="btn twitter" href="#"><span class="fa fa-twitter"></span>Twitterで登録</a>
11      </div>
12  ...
13　</body>
14...
15</html>

CSS
1/* 関係ありそうな部分のみ抜き出してます */
2.top-contents-icon{
3  text-align: center;
4  color: white;
5}
6
7.btn{
8  display: inline-block;
9  color: white;
10  padding: 8px 24px;
11  opacity: 0.8;
12  border-radius: 5px;
13}
14
15/* 効かないhover */
16.btn:hover{　
17  opacity: 1;
18}