:hoverが効かない

Question

前提・実現したいこと

:hoverを使い、<a>タグに動きをつけたい

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

class='card-link'内の、<a>タグ内にホバーエフェクトをつけたいのですが、なぜか適応されません。headerの要素にはエフェクトが適応できるのですが、問題の部分にはならないです。
また、検証ツールを使って該当箇所をみてみると、:hoverの部分が読み込まれていないようです。

該当のソースコード

HTML5

<div class="card"> <img src="images/panda.jpg" alt="" class="card-img"> <div class="card-content"> <h1 class="card-title">Lorem ipsum dolor lore.</h1> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing.</p> <div class="card-link"> <a href="" >詳しく見る➞</a> </div> </div> </div>

CSS３
.card{
width: 300px;
background: #fff;
border-radius: 5px;
box-shadow: 20px 10px 8px #ccc;
margin:20px 0;
}
.card-img{
cursor: pointer;
border-radius: 5px 5px 0 0;
width:100%;
height:200px;
object-fit: cover;

}
.card-content{
padding: 10px 20px;
}
.card-title{
font-size:20px;
margin-bottom: 20px;
text-align: center;
color:#333;
}
.card-text{
color:#777;
font-size:14px;
padding-bottom:10px;
}
.card-link {
text-align: center;
margin:0 auto;
padding:10px;

}

.card-link a{
text-decoration: none;
color:#fff;
margin:0 10px;
cursor:pointer;
border-radius:30px;
padding:10px;
background: rgb(194, 139, 48);
transition: all 0.3s ease;

}
.card-link a:hover{
opacity:.7;

}

試したこと

疑似要素のルールについて調べてみましたが、自分で解決することができませんでした。
:hoverを付与する前までのcssは適応されているので、記入ミスではないのかなと思っています。

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

Google Chromeで確認しています。エディタはAtomです。

つたない文章ですが、ご回答のほどよろしくお願いします。

Answer 1

.card-link a:hover{

のところですよね？普通に透明度が適用されて白っぽくなりますよ
へんなキャッシュが効いてるんじゃないでしょうか？

Comments

[akkman]

hover時ではない
.card-link a{
当ててみてください。

aタグはデフォルトがinlineだったと思うのでそのせいでhoverできてないのかも知れません

[yambejp]

はて、いろんなブラウザで試しましたが何の問題もありませんが・・・

Answer 2

aタグに対しdisplay:blockを当ててみるとどうですか?

Answer 3

YouTubeを見ながら見様見真似で作ったハンバーガーメニューの記述を消してみたらうまく適応されました。
回答していただいたyambejpさん、akkmanさん、ありがとうございました。
何も考えずに作ったハンバーガーメニューが問題でしたので、次回からはしっかり理解してから質問するようにさせていただきます。