Creating a preview tab for a hyperlink

<script>    let show = false;    function showPreview(){      show = true;    }    function hidePreview(){      show = false;    }</script><br><br><br><br><br><br><br><br><br><a href="https://example.com" on:focus={showPreview} on:blur={hidePreview}>Preview Link</a><div id="preview" style="display:none"></div><div id="preview" show={show}><iframe title="preview" src={"https://example.com"} width="100%" height="100%"></iframe></div><style>    #preview {      position: absolute;      width: 300px;      height: 200px;      border: 1px solid #ccc;      visibility: hidden;    }    #preview[show] {      visibility: visible;    }</style>

I am using the above code to see a preview mini tab when the mouse is over the hyperlink but here the preview tab and the hyperlink both are visible at a time.

I just need to write a bit of code that shows us a preview tab once the mouse is on the hyperlink and it should disappear when the mouse is out.

As well, when I am using the on: mouseover element I get the following warning in vs code.

A11y: on: mouseover must be accompanied by on:focussvelte(a11y-mouse-events-have-key-events)

Thank you so much for your help.