使图像显示在悬停状态

Question

我正在尝试创建一个工具提示系统，如果鼠标悬停在具有属性while (left > 0 && myList[left-1].Equals(searchValue)) 的span元素上（这将评估图像的路径），图像将显示在屏幕右上角。

tooltip

只需在<style> span[tooltip]:hover:after{ content: attr(tooltip); margin-left:auto; } </style> <p><span tooltip='url("graphics/new_folder")'>Click "New">"Folder upload"</span> and upload the folder from its location</p> 元素后面呈现文字url("graphics/new_folder")即可。用span替换content: attr(tooltip);会显示图像，但样式会奇怪地与其进行交互。赋予content:url("graphics/new_folder")，position:fixed和float:right不仅不会改变其位置，也不会从视口的角度影响图像。给它float:top和height值的定位也很奇怪。

所以，这里有多个问题：

1. 如何让width有效地渲染图像？
2. 如何让属性正确应用于图像/将图像放到屏幕的右上角？
3. 我是否忘记了可以执行此操作的API？我希望有一个存在，但找不到一个。

我一直在努力解决这个问题，非常感谢帮助！

Answer 1

您必须将图片标记设置为<img src='my_image' style='display:none;' id='open'>

现在使用需要悬停的标记元素应该有一个onMouseover事件，并且调用document.getElementById('open').style.display=教会有帮助。

Answer 2

你无法通过css content:attr()执行此操作，你必须在范围内使用<img src="">而不是将鼠标悬停在图像上，但是你无法通过css content:attr()执行此操作。

替代你可以使用data Attr做同样的事情，即data-tooltip="graphics/new_folder"