浮动文字叠加在图片悬停上

Question

我正在尝试做的是：当用户将鼠标悬停在特定页面上的任何图像上时，会出现一个浮动框元素，显示图像的标题（html title =“”标签）。 当用户在图像上移动光标时，框元素也会随之移动。

（示例： http : //minecraft-zh.gamepedia.com/Glass_Bottle-如果您在“工艺”部分下查看，将鼠标悬停在某些图像上会显示一个带有标题的框-对不起，这是我唯一能找到的示例）。

是否可以使用原始HTML来实现此结果，还是需要CSS或Javascript / Jquery之类的附加功能？

抱歉，如果我不太清楚-如果您需要某些信息，请告诉我！

在此先感谢您，祝大家新年快乐！ :)

Answer 1

几个月前，我已经使用了这个工具，并且对相同的问题也提供了很多帮助：

http://notlaura.com/show-title-hovering-image/

希望它也对您有帮助，

安德鲁

Answer 2

我认为您需要JavaScript。 我认为您不会在HTML5中获得所需的一切。 您想使用mouseover事件在光标旁边显示图像，这意味着您必须在其旁边浮动一个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