我有一个基于 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 端的新手，想知道如何才能做到这一点:当用户将鼠标悬停在我学校的 Faculty 栏下的一段文本上时(我不会链接我的学校页面，因为如果我这样做，我学校的人可能会创建此扩展名)。我希望它显示 ratemyprof 评级。
我不知道该怎么做，因为我真的不知道要在谷歌上搜索什么来做这样的事情？
我知道图像上有 CSS 叠加层，如下所示: https://www.w3schools.com/howto/howto_css_image_overlay.asp
但就我而言，我不能保证会列出哪些教授(我只是想了解做这些事情的基本过程)。
我不认为我可以使用 PHP，因为这将要求我最终想要与之共享此内容的用户也安装 php/服务器端的东西。我想我只是不知道如何去做这样的事情，也不知道在互联网上搜索什么？
最佳答案
如果您从中请求数据的站点不受您的控制，您很可能无法在没有后端的情况下执行此操作，因为 CORS，这基本上禁止站点 A 从站点 B 加载数据。站点B 必须给你特别许可。你可以在这里阅读:https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
但是，如果您能够访问这些页面，或者您决定为此使用后端，那么您正在寻找的术语就是 ajax。
您的脚本的大致轮廓如下:
- 给这些学校元素一个类名。
- 同时添加 data attribute添加到这些元素以存储获取您正在查找的信息所需的数据(例如 url 或学校名称或 ID)。
- 在 JS 中，设置一个触发器，以便当具有该类名的内容悬停时，向 url 发出 ajax 请求以获取您正在查找的数据。
- 如果ajax请求成功，在页面设置的容器中展示你想展示的数据。
- 就设置要显示的容器而言，最简单的方法可能是为每个列表添加一个空容器，然后用数据填充该容器。
如果您对所有这些都不熟悉，我建议您使用 jQuery。您可以在此处找到 ajax 文档:http://api.jquery.com/jquery.ajax/
关于javascript - 将鼠标悬停在文本上时创建叠加层，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42652599/