悬停在图像上的浮动文本覆盖

Floating text overlay on image hover

本文关键字：文本 覆盖 图像 悬停      更新时间：2023-09-26

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

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

是否可以使用原始HTML来实现这一结果，或者这需要css或Javascript/Jquery之类的添加？

对不起，如果我还不够清楚——如果你需要某些信息，请告诉我！

提前感谢，希望大家新年快乐！：）

我认为您需要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

我几个月前就用过这个，在解决同样的问题时帮了我很多忙：

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

希望它也能帮助你，

Andrew

相关文章：