jquery - 如何在鼠标悬停时获取 "pop-up"术语引用中的超链接，并将 HTML 术语与 "pop-up"引用内容分开

Question

本文是不太具体的问题的后续/重新表述 Is it possible to have a hyperlink inside {content:"..."}? .

---

用户 Naeem Shaikh ，非常感谢，友好并成功地帮助我在具有特定 id 的 HTML 标记(此处称为 "HPV" )之后使用 jQuery 在鼠标悬停时获得超链接。 JS 帮助的全部功劳都归于他。

当我根据我的特定内容(术语描述)调整它时，我得到以下内容(以前:JSFiddle 1):

HTML

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

CSS

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

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

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

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

JS(需要 jQuery)

$(function(){
    $('#HPV').hover(function(e){
       $(this).append('<a href="http://en.wikipedia.org/wiki/Human_papillomavirus"> Wikipedia.</a>');
    },function(){
       $(this).find('a').remove();
    });
});

现在我的下一个问题是如何获得超链接"inside/after" after-selector 的内容。而不是紧跟在原始 HTML 标记本身的内容之后。

在我的例子中:在“Human papillomavirus.”之后，像这样:

---

人乳头瘤病毒。 Wikipedia .
人乳头瘤病毒

---

而不是现在的样子:

---

人乳头瘤病毒。
HPV Wikipedia .

---

我想这需要一种巧妙的方法来将这些链接放置在 content 中的 :after-selector : 特别是当应该插入超过 1 个链接时，中间有额外的文本/内容。

---

一个小的评论/故障:就像现在一样，你不能把“点” .在 Wikipedia 之后在 </a> 的右侧在 JS 中。或者更确切地说:你可以，但不幸的是，原始标签的 CSS(在 CSS 中:a.term:hover)将被采用(参见 . 的灰色)。

现在可以看到相同的行为，因为超链接采用了“父”标签的灰色。

---

通常处理整个问题的另一种方法(在这样的“悬停术语描述”中包含超链接)是不使用 CSS :after -选择器，并手动有一个额外的，例如div ，紧跟在原始 HTML 标记之后，以解释“弹出描述”，因此(以前:JSFiddle 2):

HTML

<br>

<a id="term">HPV</a><div>Human papillomavirus. <a href="http://en.wikipedia.org/wiki/Human_papillomavirus">Wikipedia</a>.</div>

CSS

a#term:hover + div{display:inline} a#term + div{display:none; border:1px dotted #aaaaaa; padding:1px; top:-1em; position:relative}

当然这并不理想，因为这是在数据处理(尤其是当一个术语在文档中多次出现时)和 HTML 可读性方面失去便利性的权衡。

没有 :after -tag 也可能是采用更以 jQuery 为中心的方法，并在 jQuery 中包含引用的完整内容(常规文本和链接)。我想，然后可以在 jQuery 上使用一些额外的 CSS？

Answer 1

您可以使用 sup 在悬停时显示内容，如 chipChocolate.py 所建议的那样。但从this开始OP 和我之前的问题 answer ，我认为您可以结合使用这两种解决方案。

内容通过 jquery 动态添加到 dom，并使用上面评论中建议的标记 chipChocolate.py。见this

$(function(){
    $('#HPV').hover(function(e){
       $(this).append('<sup>Human papillomavirus<a href="http://en.wikipedia.org/wiki/Human_papillomavirus"> Wikipedia.</a></sup>');
    },function(){
       $(this).find('sup').remove();
    });
});