Divはラップ時にすべてのスタイルを失います<a>タグ

Question

私は円の要素を<a href>にラップしてハイパーリンクに変更したいプロジェクトがあります。問題は、<a>タグのhtml divをラップした後、以前に適用したスタイルを失うことです。 CSSに<a>タグを追加した後、解決策を見つけるのが難しいです。

私はCodepenを作成しました。これはプロジェクトの草案を作成したものです。 <a>タグで●はdiv要素をラップしてみてください。

CodePen

場合CodePenがダウン

.wrapper { 
 
    width: 100%; 
 
} 
 
.wrapper .first { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-flow: row wrap; 
 
    max-width: 1222px; 
 
} 
 
.wrapper .first .circle { 
 
    width: 100px; 
 
    height: 100px; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    margin-right: 20px; 
 
    margin-bottom: 10px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    background: #FF9E9D; 
 
    border-radius: 50%; 
 
    border-style: solid; 
 
    border-color: #FF9E9D; 
 
    transition: all 0.4s ease-in-out; 
 
}

<div class="wrapper"> 
 
    <div class="first"> 
 
    <div class="circle"> 
 
     <h5>MD</h5> 
 
    </div> 
 
    </div> 
 
</div>

あるおかげで、任意のヘルプは大歓迎です。

Answer 1

したいので、 div全体をリンクにしてタグにそのスタイルのクラスを与えないのはなぜですか？ 「1次回は、」あなたはあなたのリンクになりたいか、あなたは私にはないそのリンクあなたのCodePenを使用して

Answer 2

私はそのコードペンでそれを行う一方で、それが正常に動作しますが

<a href="#"><div class="circle"><h5>MD</h5></div></a> 
    <a href="#"><div class="circle"><h5>MD</h5></div></a> 
    <a href="#"><div class="circle"><h5>MD</h5></div></a>  
    <a href="#"><div class="circle"><h5>MD</h5></div></a> 
    <a href="#"><div class="circle"><h5>MD</h5></div></a> 

これはまた、私は

または

<div class="circle"><a href="#"><h5>MD</h5></a></div> 

を行って何をされている正常に見える