編集後にhrefリンクが機能しない

Question

私は友人のウェブサイトを更新しようとしており、Genbookボタンを保持する必要があります。現在のサイトのコードをコピーして私が現在書いているコードに貼り付け、CSSでフォーマットしようとするまでうまくいきます。彼女のロゴを中心にしたいので、私はCSSを編集する必要があります。 CSSを編集するとリンクが非アクティブになるのはなぜか分かりません。

Firefoxでライブプレビュー：アクティブおよびフォーマットされていないactive link, without CSS (notice mouse cursor)

ライブプレビューFirefoxで：非アクティブとinactive link, with CSS (notice mouse cursor)

#genbook { 
 
    position: absolute; 
 
    top: 210px; 
 
    left: 50px; 
 
}

<div id="genbook"> 
 
    <script src="https://www.genbook.com/bookings/booknowjstag.action?id=30216717&size=medium"></script> 
 
    <noscript> 
 
    <a href="https://www.genbook.com/bookings/slot/reservation/30216717?bookingSourceId=1000"> 
 
     <img src="https://www.genbook.com/bookings/images/booknow-button-medium.png" width="150" height="50" alt="Make an Online Appointment" border="0"> 
 
    </a> 
 
    <br> 
 
    <a href="http://www.genbook.com" style="font-size:10px;"></a> 
 
    </noscript> 
 
</div>

フォーマットされた今、私はさらに混乱しています！これはCodepenとCode Snippetで動作しているようです。だから、なぜプレビューで動作し、プレビューで動作しないのだろうか？

新しい質問：実際に機能しているかどうかはどのようにわかりますか？

Answer 1

投稿コードは<noscript></noscript>タグで、<script src="https://www.genbook.com/bookings/booknowjstag.action?id=30216717&size=medium"></script>はDOMに異なるコードをロードしましたが、これはうまくいきません。あなたはnoscriptを削除することができ、それは動作します。最も可能性が高いのzインデックスの問題

#genbook { 
 
    position: absolute; 
 
    top: 210px; 
 
    left: 50px; 
 
}

<div id="genbook"> 
 
    <a href="https://www.genbook.com/bookings/slot/reservation/30216717?bookingSourceId=1000"> 
 
     <img src="https://www.genbook.com/bookings/images/booknow-button-medium.png" width="150" height="50" alt="Make an Online Appointment" border="0" /> 
 
    </a> 
 
</div>