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

Question

What I'm trying to do: When a user hovers over any image on a specific page, a floating box element appears, displaying the Image's title (the html title="" tag). As the user moves their cursor across the image, the box element moves along with it.

(Example: http://minecraft.gamepedia.com/Glass_Bottle - If you looking under the "crafting" section, hovering over certain images displays a box with it's title - Sorry, this was the only example that I could find).

Is it possible to achieve this result utilising raw HTML, or does this require css or an addition such as Javascript/Jquery?

Sorry if I haven't been clear enough - if you require certain information, please let me know!

Thanks in advance, and I hope everyone has a Happy New Year! :)

Answer 1

I have used this a few months ago and helped me a lot with the very same problem:

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

Hope it helps you as well,

Andrew

Answer 2

I think you need javascript. I don't think your going to get everything you want in HTML5. You want to use the mouseover event to show the image next to the cursor which means you'll have to float a div next to it. The moving part won't be a problem because you'll probably just reshow it for every mouse over which will get fired every time they move the cursor I think. Here are the problems you must solve. Figure out one at a time.

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