浮动文本覆盖图像悬停

时间:2016-01-03 05:20:50

标签: javascript php html css

我正在尝试做的事情:当用户将鼠标悬停在特定页面上的任何图像上时,会出现一个浮动框元素,显示图像的标题(html title =“”标签)。当用户将光标移过图像时,框元素随之移动。

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

是否可以利用原始HTML实现此结果,还是需要css或Javascript / Jquery等附加功能?

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

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

2 个答案:

答案 0 :(得分:1)

几个月前我用过这个问题并且在同样的问题上给了我很多帮助:

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

希望它对你有所帮助,

安德鲁

答案 1 :(得分:1)

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