javascript - 图像悬停时的 float 文本叠加

标签 javascript php html css

我想做的是:当用户将鼠标悬停在特定页面上的任何图像上时,会出现一个 float 框元素,显示图像的标题(html title=""标记)。当用户将光标移过图像时,框元素会随之移动。

(示例:http://minecraft.gamepedia.com/Glass_Bottle - 如果您查看“制作”部分,将鼠标悬停在某些图像上会显示一个带有标题的框 - 抱歉,这是我能找到的唯一示例)。

是否可以使用原始 HTML 实现此结果,或者这是否需要 css 或附加功能(例如 Javascript/Jquery)?

抱歉,如果我不够清楚 - 如果您需要某些信息,请告诉我!

提前致谢,祝大家新年快乐! :)

最佳答案

我认为您需要 javascript。我认为您不会在 HTML5 中获得您想要的一切。你想使用鼠标悬停事件来显示光标旁边的图像,这意味着你必须在它旁边 float 一个 div。移动部分不会有问题,因为你可能会为每次鼠标移动时重新显示它,我认为每次移动光标时都会被触发。以下是您必须解决的问题。一次找出一个。

1) How to float a div at a higher z index with the title in it.
2) How to know the coordinates of your curser
3) Move the div to your cursor coordinates with an offset
4) How to hide the div

关于javascript - 图像悬停时的 float 文本叠加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34573601/

相关文章:

javascript - 如何检查客户端浏览器是否阻止了 font awesome?

javascript - Jquery表编辑行取消按钮无法正常工作

html - 两张背景图片,一张从另一张结束

php - 地理坐标到街道名称

javascript - React JS - 单击更改颜色并将默认颜色放在所有其他颜色上

html - 通过浏览器远程查看linux上的文件

javascript - 菜单滚动器在 Extjs 中无法正常工作

javascript - 在 Javascript 中实现归并排序

php - 知道为什么我可以从命令行执行命令而不是从 PHP exec()

php - 尝试将 Guzzle Curl 客户端绑定(bind)到 Laravel 的服务容器——然后在尝试 __construct() 时键入提示客户端失败