How to create a preview tabs for an hyperlink

Question

<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. Could somebody help me with where I am going wrong?

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.

Answer 1

By using the Adjacent sibling combinator I think what you want to achieve can be done without js

REPL

<script>
    export let txt
    export let url
</script>

<div>
    <a href={url}>{txt}</a>
    <iframe title="preview" src={url} width="300" height="200"></iframe>
</div>

<style>
    div {
        position: relative;
        display: inline-block;
    }
    iframe {
        position: absolute;
        left: 0;
        top: 100%;
        border: 1px solid #ccc;
        z-index: 1;
        display: none;
    }
    a:hover + iframe,
    a:focus + iframe {
        display: block;
    }
</style>

I assumed the display would affect the loading of the iframe but this seems to be only partially true. Chrome and Firefox seem to load images and fonts on hover, Safari directly. So using js might be better performance-wise

<script>
    export let txt
    export let url

    let hovered
</script>

<div>
    <a href={url}
         on:mouseenter="{() => hovered = true}"
         on:mouseleave="{() => hovered = false}"
         on:focus="{() => hovered = true}"
         on:blur="{() => hovered = false}"
         >
        {txt}
    </a>
    {#if hovered}
    <iframe title="preview" src={url} width="300" height="200"></iframe>
    {/if}
</div>

<style>
    div {
        position: relative;
        display: inline-block;
    }
    iframe {
        position: absolute;
        left: 0;
        top: 100%;
        border: 1px solid #ccc;
        z-index: 1;
    }
</style>