能否在GitHub Flavored Markdown中实现鼠标悬停可见的文本?
GFM中实现悬停显示的剧透文本方案
你的代码失效的核心原因是:GitHub Flavored Markdown(GFM)会严格清理HTML内容——所有JavaScript事件属性(比如你用的onmouseover)都会被直接移除,部分风险样式也会被过滤,导致交互逻辑完全失效。
针对你的需求,目前有两种可行的替代方案:
1. 工具提示式剧透(悬停弹窗显示)
用<abbr>标签配合title属性实现,这是浏览器原生支持的功能,GFM也不会清理:
<p>Lorem ipsum <abbr title="hidden stuff hidden stuff">hover here</abbr> text text text</p>
效果:鼠标悬停在hover here文本上时,会弹出包含剧透内容的系统默认提示框。
2. 点击展开式剧透(GFM原生支持)
如果你能接受点击触发而非悬停,GFM原生支持<details>+<summary>标签实现可折叠的剧透:
<p>Lorem ipsum <details><summary>点击查看剧透</summary>hidden stuff hidden stuff</details> text text text</p>
效果:点击"点击查看剧透"即可展开显示内容,再次点击收起。
关于悬停原地显示文本的说明
如果一定要实现鼠标悬停时在原位置直接显示文本的效果,目前在GFM里是做不到的:GFM不允许自定义CSS类,inline样式也不支持:hover伪类,同时所有JavaScript代码都会被清理,没有可行的交互触发方式。
内容的提问来源于stack exchange,提问作者CcmU
相关产品推荐
相关产品推荐

