html 如何为超链接创建预览选项卡

ix0qys7i 于 2023-01-28 发布在其他

关注(0)|答案(1)|浏览(148)

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

我使用上面的代码来查看一个预览迷你标签当鼠标在超链接上但这里预览标签和超链接都是可见的。有人能帮助我哪里我错了吗？
我只需要写一点代码，显示我们一个预览标签，一旦鼠标在超链接上，它应该消失时，鼠标了。
同样，当我在上使用时：我在vs代码中得到了以下警告。
A11 y：on：mouseover必须与on：focusvelte一起使用（a11 y-鼠标事件-有键事件）
非常感谢你的帮助。

Html

来源：https://stackoverflow.com/questions/75223847/how-to-create-a-preview-tabs-for-an-hyperlink

1条答案

按热度按时间

cxfofazt1#

通过使用Adjacent sibling combinator，我认为您想要实现的功能可以在没有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似乎直接在hover和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>

赞(0）回复(0）举报 2023-01-28

我来回答

html 如何为超链接创建预览选项卡

1条答案

相关问题

热门标签

最新问答