将鼠标悬停在文本上时创建叠加层答案

【问题标题】：Create a overlay when hovering over text将鼠标悬停在文本上时创建叠加层
【发布时间】：2017-03-08 00:26:51
【问题描述】：

我有一个基于 html 的简单文件，如下所示：

<html>
    <body>
        <b>Faculty</b><br><br>
        Dr Mcgee
        <br>
        Dr Else
        <br><br>
        <b>Values</b><br><br>
        1
        <br>
        2
        <br>

    </body>
</html>

我是 Web 端的新手，想知道我该怎么做：当用户将鼠标悬停在我学校的“教师”栏下的一段文本上时（我不会链接我的学校页面，因为如果我这样做，我学校的某个人可能会创建此扩展程序）。我希望它显示 ratemyproff 评级。

我不知道该怎么做，因为我真的不知道在谷歌上搜索什么来做这样的事情？

我知道像这样的图像上有 CSS 覆盖： https://www.w3schools.com/howto/howto_css_image_overlay.asp

但就我而言，我不保证会列出哪些教授（我只是想了解做这些事情的基本过程）。

我不认为我可以使用 PHP，因为这需要我最终要与之共享的用户也安装了 php/server 端的东西。我想我只是不知道如何去做这样的事情，也不知道在互联网上搜索什么？

【问题讨论】：

如果没有后端来检索数据，您可能会遇到困难，因为来自浏览器的任何 AJAX 请求通常都仅限于同源
另外，除非网站有 API，否则抓取网站可能会违反他们的条款和条件。
@phuzi 我认为你已经超越了自己，据我所知，这是一个更简单的请求，但是如果 html 中的学校是，你怎么能得到任何请求或做任何事情甚至不在标签中
这更多地与我的学校（大学）的课程选择系统有关，我基本上想制作 chrome 扩展，一旦将鼠标悬停在教授名称上，它就会显示他们的评分。我不想包含此内容，因为我学校的某个人可能会在我这样做之前阅读此内容并进行此类扩展（针对我的学校）。
我已经更新了关于我真正想要做什么的问题。请注意，我的学校页面显然不是一个简单的 html 文件，我只是将其作为新手程序员的示例。

标签： javascript jquery html css node.js

【解决方案1】：

如果您请求数据的站点不在您的控制之下，您很可能在没有后端的情况下无法执行此操作，因为 CORS 基本上禁止站点 A 从站点 B 加载数据。站点B必须给你特别许可。你可以在这里阅读：https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

但是，如果您能够访问这些页面，或者您决定为此使用后端，那么您正在寻找的术语是 ajax。

您的脚本可能看起来的大致轮廓如下：

为这些学校元素命名。
还将data attribute 添加到这些元素中，以存储获取所需信息所需的数据（例如，网址或学校名称或 ID）。
在 JS 中，设置一个触发器，以便当悬停具有该类名的内容时，会向 url 发出 ajax 请求以获取您要查找的数据。
如果ajax请求成功，在页面设置的容器中显示你想显示的数据。
就设置要显示的容器而言，最简单的方法可能是为每个列表添加一个空容器，然后填充数据。

如果您不熟悉这一切，我建议您使用 jQuery。你可以在这里找到 ajax 文档：http://api.jquery.com/jquery.ajax/

【讨论】：

不受我控制是什么意思？这些网站供学生选择课程，但任何人都可以在这些特定网站上搜索课程。所以我不确定？其中很多术语对我来说都是新的。
出于安全原因，浏览器只允许您向同一域中的资源发出 ajax 请求。因此，如果您的学校网站是 www.learning.edu，但您托管在 www.somestudent.com 并尝试从 somestudent.com 向 learning.edu 发出 ajax 请求，您将在控制台广告中看到错误，数据不会加载。但是，如果您能够或让 learning.edu 上的某个人实现 CORS 标头，则可以对来自某些域（或向所有人开放）的请求进行例外处理。我希望这有助于澄清我的意思！

【解决方案2】：

第一步：

当鼠标悬停在可搜索的文本上时，使用某些东西来获取文本并存储在 javascript 变量中，为此，请将文本放在单个节点中，例如 <span class="searchable">This text is searchable</span>.

你可以这样做来获取节点值http://jsfiddle.net/5gyRx/

第二步：

添加一个空节点 <div class="data"></div> 绝对位于容器 div 内，用于显示获取的有关该文本的详细信息。

第三步：

使用 JavaScript/jQuery 使用您从第一步获得的文本触发 Ajax 调用，并使用此数据填充之前创建的空节点。

【讨论】：

我已将我的问题更新为我想要的更多内容，但我认为您的回答仍然相关？