javascript - javascript 鼠标悬停图像弹出窗口，弹出窗口和关闭按钮中带有文本

Question

当我将鼠标悬停在链接上时，我当前的代码会弹出一个图像。

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

此外，我还希望弹出窗口上有一个“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();
});

});

这是一些示例html代码：

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

谢谢

Answer 1

你会想玩弄一些来让它看起来不错，但这应该是你想要的基础。

$('.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
});