提问人：Miss_Orchid 提问时间：2/7/2021 更新时间：2/7/2021 访问量：683
HTML / CSS / JavaScript 悬停文本“字典”
html / css / javascript hover text 'dictionary'
问：
我计划制作几页教学主题，其中某些单词应该有弹出文本以进一步定义单词。到目前为止，我对创建弹出文本的有限知识包括（如果是图像）：
<img src="\images\image1.png" alt="" title="hover text" />
但是当将鼠标悬停在文本上时，我更喜欢弹出框，例如：
<p><dfn title="HyperText Markup Language">HTML</dfn> is the standard markup language for creating web pages.</p>
<p><dfn title="Cascading Style Sheets">CSS</dfn> is another standard markup language for creating web pages.</p>
如果我有多个“HTML”实例，我希望与整个页面中的弹出窗口相关联，这将变得相当麻烦，以确保我对“HTML”或“CSS”的定义具有完全相同的措辞。是否有某种类定义字典或某种函数可用于包装每个“HTML”或“CSS”实例？例如：
Here is some text leading up to the word <class = "definition", id = "HTML"> and I am continuing some text until I get to <class = "definition", id = "CSS"> and then I continue my text.
对于这种情况，最佳做法是什么？我想确保整个文本中的定义是相同的，当我扩展到其他页面时，定义也是一样的。
答：
1赞
A Haworth
2/7/2021
#1
虽然 dfn 元素允许建立页内链接，但对于用户来说，这并不像将鼠标悬停在一个单词上那样流畅，因为他们必须做一些事情才能回到原来的位置。它也不会自动跨页面工作。
如何在 dfns 上使用 CSS 类和伪元素之后？我知道这是在内容中放置具有实际意义的东西，但它确实在一定程度上起作用（例如，如果靠近一行的末尾，则存在放置弹出窗口的位置的常见问题）。
要创建 CSS，如果您有一个很长的定义列表，您可能需要敲击一些 JS 或一些后端脚本。
以下是以这种方式标记的问题中的代码：
dfn:hover::after {
position: absolute;
z-index: 9999;
background-color: white;
border-color: red;
border-style: solid;
padding: 5px;
}
.html:hover::after {
content: 'HyperText Markup Language';
}
.css:hover::after {
content: 'Cascading Style Sheet';
}<p><dfn class="html">HTML</dfn> is the standard markup language for creating web pages.</p>
<p><dfn class="css">CSS</dfn> is another standard markup language for creating web pages.</p>
评论