Javascript 鼠标悬停显示全尺寸图像

我有两个相同的图像链接。一个是屏幕上显示的缩略图。第二个链接是缩略图的全尺寸图像

我如何编写代码，以便当鼠标悬停在图像上时，屏幕变黑，只显示全屏图像

<div id= "1" class="thumbnail"><a href="/fullsizeimage.jpg"><img scr="/thumbnail.jpg"> </a></div>
<div id= "2" class="thumbnail"><a href="/fullsizeimage2.jpg"><img scr="/thumbnail2.jpg"> </a></div>

鼠标悬停

使屏幕变黑

在屏幕中央加载

Fullsizeimage.jpg

---

您可以将div元素置于所有其他元素之上（使用100%的宽度和高度，

位置：绝对

和

z-index

）。默认情况下将其隐藏。然后，当您准备好显示图像时，使该div可见并将全尺寸图像加载到其中。只需给div一些css属性-

背景色：黑色

，就可以使屏幕变黑

您需要修改HTML，使小图像包含对大图像的引用。像这样的-

<div id= "smallImage" class="thumbnail"><a href="/fullsizeimage.jpg"><img scr="/thumbnail.jpg"> </a></div>

然后，大图像的HMTL将为-

$("#smallImage").on('mouseover',function(){
  var smallImage = $(this);
  var largeReference = smallImage.attr('rel');
  $("#largeImage").attr('src',largeReference);
});

不要忘记允许用户关闭此大图像视图。

函数fullscreen1（）{
<img id="largeImage" src="" />

img=document.getElementById（'img1'）
img.src=“/fullsizemage.jpg”
img.style=“位置：固定；顶部：30px；左侧：30px；宽度：990px；长方体阴影：6px 7px 5px；背景色：rgb（70,70,70）；”}
函数fullscreen2（）{
img=document.getElementById（'img2'）
img.src=“/fullsizeimage2.jpg”
img.style=“位置：固定；顶部：30px；左侧：30px；宽度：990px；长方体阴影：6px 7px 5px；背景色：rgb（70,70,70）；”}

别忘了按照其中一个答案中的建议放置关闭链接

使用下面的CSS显示图像悬停时的黑色div属性 我怎么能“将全尺寸图像加载到其中”只有当我将鼠标悬停在图像上时，才有方法加载图像吗？

function fullscreen1() {
img = document.getElementById('img1')
img.src = "/fullsizeimage.jpg"
img.style = "position:fixed;top:30px;left:30px;width:990px;box-shadow:6px 7px 5px;background-color:rgb(70,70,70);"}
 function fullscreen2() {
img = document.getElementById('img2')
img.src = "/fullsizeimage2.jpg"
img.style = "position:fixed;top:30px;left:30px;width:990px;box-shadow:6px 7px 5px;background-color:rgb(70,70,70);"}
    <div id= "1" class="thumbnail"><a href="/fullsizeimage.jpg" onmouseover="fullscreen1()"><img id="img1" scr="/thumbnail.jpg"> </a></div>
    <div id= "2" class="thumbnail"><a href="/fullsizeimage2.jpg" onmouseover="fullscreen2()"><img id="img2" scr="/thumbnail2.jpg"> </a></div>

`#1 Img:hover +div  {
position:fixed;
top:0px;
left:0px;
width:"set the width";
height :"set the height";
}`