在鼠标悬停上创建动态图像

Question

当用户将鼠标悬停在特定内容上时，我想创建一个Image。我想要通过javascript动态创建的图像上的一些数据。附上我需要做的图像，...

我希望在悬停时显示目标图像。知道我该怎么办？

Answer 1

我猜您正在寻找带图像的工具提示。试试这些例子。

http://craigsworks.com/projects/qtip2/

http://calebjacob.com/tooltipster/

http://plugins.learningjquery.com/cluetip/

http://cssglobe.com/easiest-tooltip-and-image-preview-using-jquery/

http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

http://vandelaydesign.com/blog/tools/jquery-tooltip-scripts/

Answer 2

您有任何现有代码吗？

你也可以试试

:hover

http://www.w3schools.com/cssref/sel_hover.asp和

:after

http://www.w3schools.com/cssref/sel_after.asp 和内容属性

Answer 3

您可以尝试使用jQuery的“悬停”方法并从回调函数的事件参数中捕获鼠标位置。然后添加一个新的绝对定位div，并使用从鼠标位置获取的顶部和左侧参数位置对其进行样式设置。添加您需要在弹出窗口中显示的任何信息，并将其附加到新创建的div。

Answer 4

功能在javascript中进行：

function showIt(imgsrc)
{
document.getElementById('imageshow').src=imgsrc;
document.getElementById('imageshow').style.display='block';
}

function hideIt()
{
document.getElementById('imageshow').style.display='none';
}