是否可以在 {content:"..."} 中添加超链接？

Question

META: 此文档被标记为重复，建议我创建另一个 post 相反，这就是我在这里所做的：。然后，我也意识到更好地制定应用程序的目标是个好主意。

作为一个反思：我认为很难在一方面的特异性和另一方面的目标导向之间做出良好的权衡，尤其是对于没有经验的用户。对于任何麻烦，我深表歉意。非常感谢您的帮助。

---

是否可以在 CSS 语法 {content:"..."} 中使用 hyperlink？如何创建这样一个 link？

例如，这是我创建的一段代码，用于对鼠标悬停进行术语描述：

HTML

<br><term id="HPV">HPV</term>

CSS

term{text-decoration:underline; text-decoration-style:dotted; -moz-text-decoration-style:dotted}

term:hover{text-decoration:none; color:#aaaaaa}

term#HPV:hover:after{position:relative; padding: 1px; top:-0.9em; left:-5px; border:1px dotted #aaaaaa; color:black}

term#HPV:hover:after{content:"Human papillomavirus."}

我想知道如何获得 "Human papillomavirus." hyperlinked?

Answer 1

"Content added with the pseudo-element doesn't appear in the DOM, so no you can't. But why do you want to do it with CSS ? It is not styling, the right place seems to be directly on the HTML file." 复制自 here

Answer 2

css 没有解决此问题的方法。内容中的任何内容都不会是 html 标记，它是唯一的文本。所以您可以在悬停时添加一个 html 元素，该元素链接到另一个 url。例如 http://jsfiddle.net/naeemshaikh27/1ysyr0tb/2/

$(function(){
    $('#HPV').hover(function(e){
       $(this).append('<a href="google.com">click me</a>');;
    },function(){

    });
});

是否可以在 {content:"..."} 中添加超链接？

Is it possible to have a hyperlink inside {content:"..."}?

html

css

hyperlink

---

HTML

CSS