浮動文字疊加在圖片懸停上

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