超链接预览标签显示异常及Svelte无障碍警告问题求助

修改后的完整代码 #

<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:mouseover={showPreview} 
   on:focus={showPreview}
   on:mouseout={hidePreview}
   on:blur={hidePreview}>
    Preview Link
</a>

<div id="preview" {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="true"] {
      visibility: visible;
    }
</style>

关键修改说明 #

• 删除重复ID元素：原代码存在两个id="preview"的div，ID唯一性是DOM规范要求，重复ID会导致样式和逻辑冲突，直接删除冗余的空div。
• 补充鼠标交互事件：给链接添加on:mouseover（鼠标移入）和on:mouseout（鼠标移出）事件，绑定对应的显示/隐藏函数，实现悬停触发预览的需求。
• 满足无障碍要求：保留原有的on:focus和on:blur事件，与鼠标事件配对。这样既支持鼠标用户，也支持键盘用户通过Tab键聚焦/失焦链接时触发预览，解决VS Code弹出的a11y-mouse-events-have-key-events警告。
• 调整样式匹配规则：将样式选择器从#preview[show]改为#preview[show="true"]，因为Svelte绑定布尔属性时，会将true值渲染为show="true"属性，false时移除该属性，此修改能确保样式准确匹配预览框的显示状态。

内容的提问来源于stack exchange，提问作者Balaramakrishna Paritala