为超链接创建预览选项卡

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>

我使用上面的代码来查看当鼠标悬停在超链接上时会看到一个预览迷你选项卡，但这里预览选项卡和超链接同时可见。

我只需要编写一些代码，当鼠标位于超链接上时，它会向我们显示一个预览选项卡，并且当鼠标移出时，它应该消失。

同样，当我使用 on: mouseover 元素时，我在 vs code 中收到以下警告。

A11y: on: mouseover 必须伴随 on:focussvelte(a11y-mouse-events-have-key-events)

非常感谢您的帮助。

Answer 1

通过使用相邻兄弟组合器我认为你想要实现的目标可以在没有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>

我假设显示会影响 iframe 的加载，但这似乎只是部分正确。 Chrome 和 Firefox 似乎在悬停时加载图像和字体，Safari 则直接加载。所以使用 js 可能性能更好

<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>