javascript鼠标悬停图像弹出窗口，在弹出窗口和关闭按钮中显示文本

当我将鼠标滑过链接时，我当前的代码会弹出一个图像

我想添加的功能，除了图像，文本描述也在弹出窗口

此外，我还希望在弹出窗口上有一个“X”关闭按钮，单击该按钮将关闭弹出窗口。当前，当我鼠标移出时，图像会消失。但是我也想要关闭按钮

如何添加这些内容

以下是我当前的javascript代码：

$(document).ready(function() {  
var offsetX = 10;
var offsetY = 5;
$('.menu').mouseover(function(e) {
    console.log(e);
    var href = $(this).attr('href');
    $('<img id="image" src="' + href + '"/>')
    .css('top', e.pageY + offsetY)
    .css('left', e.pageX + offsetX)
    .appendTo('body');
}, function(e) {
    $('#image').remove();
});
$('.menu').mouseout(function(e) {

    $("#image").css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
    $('#image').remove();
});

});

$（文档）.ready（函数（）{
var offsetX=10；
var-offsetY=5；
$（'.menu'）.mouseover（函数（e）{
控制台日志（e）；
var href=$（this.attr（'href'）；
$('')
.css（'top'，例如pageY+offsetY）
.css（'left'，e.pageX+offsetX）
.附于（“主体”）；
}，功能（e）{
$（'#image'）。删除（）；
});
$（'.menu'）.mouseout（函数（e）{
$（“#image”）.css（'top'，e.pageY+offsetY）.css（'left'，e.pageX+offsetX）；
$（'#image'）。删除（）；
});
});

以下是一些示例html代码：

<a id='image1' class='menu' href="images/image1.jpg" alt=""><b>Image Description:</b> Text about this image.</a>

---

谢谢

你可能会想玩一下这个，让它看起来很好看，但这应该是你想要的基础

$('.menu').mouseover(function(e) {
    console.log(e);
    var href = $(this).attr('href');
    var popup = $('<div id="myPopup"></div>');

    var image = $('<img id="image" src="' + href + '"/>');
    popup.append(image);

    var text = $('<p>My Text</p>');
    popup.append(text);

    var closeBtn = $('<button>X</button>');
    popup.append(closeBtn);

    popup.css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
    popup.append('body');

    closeBtn.button().click(function() {
        $('#myPopup').remove();
    });
}, function(e) {
    // do nothing
});

$（'.menu'）.mouseover（函数（e）{
控制台日志（e）；
var href=$（this.attr（'href'）；
变量弹出=$（''）；
变量图像=$（''）；
弹出。追加（图像）；
var text=$（“My text
”）；
弹出。追加（文本）；
var closeBtn=$（'X'）；
弹出.追加（关闭BTN）；
css（'top'，e.pageY+offsetY.）.css（'left'，e.pageX+offsetX）；
popup.append（'body'）；
closeBtn.button（）。单击（函数（））{
$（'#myPopup'）。删除（）；
});
}，功能（e）{
//无所事事
});

对于类似的问题，您有一个很好的JQuery插件。好的，谢谢@zshooter。我有一个独特的弹出窗口和每个链接的描述多个图像。如何获取弹出窗口中特定图像的文本？此外，我的代码适用于多个图像。如何将追加文本添加到我提供的代码中？我将使其成为要将鼠标移到的元素的属性，以便从函数中的

href

对象轻松访问。例如：

class=“menu”popupText=“My Text”

然后在JS

var Text=$（this.attr（'popupText'）