将鼠标悬停在脚本上方时使用居中图像弹出框

Question

我在此站点的下面的脚本中找到了鼠标，它非常好用且易于使用。 唯一的缺点是放置图像的位置。 图像与课程设置相关，并随着鼠标的移动而跟随。

问题：是否可以使图像显示在可见屏幕的中央并固定在那里？ （只要鼠标悬停在文本上，位置固定。）

剧本

    var offsetX = 180;
    var offsetY = -25;
    $('a').hover(function(e) {
    var href = $(this).attr('href');    
$('<img id="largeImage" src="' + href + '" alt="big image" />')
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX)
.appendTo('body');
}, function() {
$('#largeImage').remove();
});

$('a').mousemove(function(e) {
$("#largeImage").css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
}); 

这是CSS样式

    #largeImage {
position:absolute;
padding: .5em;
background: #e3e3e3;
border: 1px solid #BFBFBF;
color:#aa1416;
}

的HTML

    <div class="largeImage">
    <li><h2><a id="item1"href="images/image6a.png">Breakfast Plates .....</a></h2>
    </div>

Answer 1

 $('a').hover(function(e) { var href = $(this).attr('href'); $('<img id="largeImage" src="' + href + '" alt="big image" />') .appendTo('body'); }, function() { $('#largeImage').remove(); }); $('a').mousemove(function(e) {}); 

 #largeImage { position: fixed; padding: .5em; background: #e3e3e3; border: 1px solid #BFBFBF; color: #aa1416; left: 50%; top: 50%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="largeImage"> <li> <h2><a id="item1"href="images/image6a.png">Breakfast Plates .....</a></h2> </div>