悬停弹出文本框无法访问HTML？

Question

我试图在鼠标悬停时创建一个带文本的弹出框。我的问题是我无法访问html，我无法上传javascript-但我可以做css并编写Javascript。

我发现大多数示例要么您要么更改cssclasses，要么上传Javascript。由于我无法在内部脚本中链接，因此失败。

我可以使用Javascript完成此操作而无需上传脚本文件吗？

hmtl示例，其中span类是我需要定位的类：

<a href="/products/Microsoft/All-in-One-Media-Keyboard-with-TouchPad-German-?prodid=1676284">All-in-One Media Keyboard with TouchPad German  <span class="labelextension N2">Bulk</span> </a>

Answer 1

这是如何做你所描述的非常粗略的例子：

• 获取触发元素（$('.labelextension')）
• 创建一个将成为弹出窗口（popup = document.createElement(...)）
的元素
• 将元素附加到触发元素（...appendChild(popup)）
• 更改其css，使其仅在鼠标悬停触发元素时显示（popup.classList.add('tooltip')和.tooltip {display:none} .labelextension:hover .tooltip {display : inline;}）

这里有一个相当糟糕的JSFiddle：http://jsfiddle.net/kcdagqdn/