如何使用JS和CSS在html上的鼠标悬停时显示弹出窗口？

Question

我试图根据元素和属性在鼠标悬停时显示弹出文本。 但是，我想在文本上将鼠标悬停在<a>上的弹出框中显示id的内容。

html-1.xhtml

<section id="sec1">
<div id="div1">
<p id="p1"><a class="keyword" id="k1" href="glossary.xhtml#g1">Lorem Ipsum</a> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
<p id="p2"><a class="keyword" id="k2" href="glossary.xhtml#g2">Aldus PageMaker</a> was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <a class="keyword" id="k2" href="glossary.xhtml#g2">Aldus PageMaker</a> including versions of Lorem Ipsum.</p>
</div>
<section>

html-2.xhtml

<section id="sec2">
<div id="div2">
<p id="p3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
<p id="p4">It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<section>

Gloss.xhtml

<section class="glossary"><header><h1 class="title">Glossary</h1></header>
<dl class="glossentrylist" id="g1"><dt class="glossterm" id="t1"><dfn>Lorem Ipsum</dfn></dt><dd class="glossdef" id="d1"><p id="gtd1">Lorem Ipsum.</p></dd></dl>
<dl class="glossentrylist" id="g2"><dt class="glossterm" id="t2"><dfn>Aldus PageMaker</dfn></dt><dd class="glossdef" id="d2"><p id="gtd1">Aldus PageMaker.</p></dd></dl>
</section>

如果有人帮助我解决这个问题，那将非常有帮助。

Answer 1

如果我理解正确，则可以完全使用CSS执行此操作。 这是一个小提琴

 p.ppup {border-bottom: thin dotted; background: #ffeedd;} p.ppup:hover {text-decoration: none; background: #ffffff; z-index: 6; } p.ppup span {position: absolute; left: -9999px; margin: 20px 0 0 0px; padding: 3px 3px 3px 3px; border-style:solid; border-color:black; border-width:1px; z-index: 6;} p.ppup:hover span {left: 2%; background: #ffffff;} p.ppup span {position: absolute; left: -9999px; margin: 4px 0 0 0px; padding: 3px 3px 3px 3px; border-style:solid; border-color:black; border-width:1px;} p.ppup:hover span {margin: 20px 0 0 170px; background: #ffffff; z-index:6;} 

 <section id="sec1"> <div id="div1"> <p id="p1" class="ppup"><a class="keyword" id="k1" href="glossary.xhtml#g1">Lorem Ipsum</a><span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</span></p> <p id="p2" class="ppup"><a class="keyword" id="k2" href="glossary.xhtml#g2">Aldus PageMaker</a><span> was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <a class="keyword" id="k2" href="glossary.xhtml#g2">Aldus PageMaker</a> including versions of Lorem Ipsum.</span></p> </div> <section>