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

时间:2015-01-22 11:34:01

标签: html css hyperlink

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

作为一种反思:我认为特别是对于没有经验的用户来说,选择一方面的特异性和另一方面的目标导向之间的良好平衡可能很困难。我为任何麻烦道歉。非常感谢您的帮助。

---

是否可以在CSS语法{content:"..."}中包含超链接?如何创建这样的链接?


作为一个例子,这里是我创建的一段代码,在鼠标悬停时有一个术语解释:

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."}

我想知道如何获得人乳头瘤病毒。&#34; How to get hyperlinks inside a "pop-up" term reference on mouse-over, and seperate the HTML term from the "pop-up" reference content

2 个答案:

答案 0 :(得分:2)

&#34;使用伪元素添加的内容不会出现在DOM中,所以不能这样做。但是你为什么要用CSS做呢?它不是造型,正确的地方似乎直接在HTML文件上。&#34;复制自here

答案 1 :(得分:0)

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

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

    });
});