如何在鼠标悬停时从占位符中删除图像

Question

我已经发布了这个问题但仍然无法得到它。每当我第一次在任何较小的图像上悬停时，占位符上会出现较大的图像，每当我将鼠标移出图像时占位符图像为空白，这就是我想要它做的。但是，只做了一次，每当我将鼠标悬停在任何一个小图像上时，它就不再出现，只有在第一次工作时请帮忙。

var fullpic = new Array(4);

 for (var i = 0; i < fullpic.length; i++)

   fullpic[i] = new Image(515, 385);

 fullpic[0].src = "http://placehold.it/350x150";
 fullpic[1].src = "http://placehold.it/350x150";
 fullpic[2].src = "http://placehold.it/350x150";
 fullpic[3].src = "http://placehold.it/350x150";


 function displayFull(i) {


   document.getElementById("img-cover").src = fullpic[i].src;
 }

 function hideFull(i) {
   document.getElementById("img-cover").src = fullpic[i].src;
   document.getElementById("img-cover").style.visibility = 'hidden';
 }

 var fullbanner = new Array(4);

 for (var i = 0; i < fullbanner.length; i++)

   fullbanner[i] = new Image(468, 60);

 fullbanner[0].src = "http://placehold.it/350x150";
 fullbanner[1].src = "http://placehold.it/350x150";
 fullbanner[2].src = "http://placehold.it/350x150";
 fullbanner[3].src = "http://placehold.it/350x150";

 var n = 0;

 window.addEventListener("load", showFull, false);

 function showFull() {

   setInterval("showPic()", 3000);


 }

 function showPic() {

   document.getElementById("banner").src = fullbanner[n].src;
   n++;
   if (n > 3)
     n = 0;

 }

//CSS
 #banner-wrapper {
  position: relative;
  width: 468px;
  height: 61px;
  margin: 0 auto;
  margin-bottom: 10px;
}
#banner {
  text-align: center;
}
#thumbs {
  width: 425px;
  height: 80px;
  margin: 0 auto;
}
#main-img {
  width: 513px;
  height: 385px;
  margin: 0 auto;
  border: 1px solid black;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#img-cover {
  max-height: 385px;
  padding: 5px;
}

<div id="banner-wrapper">
</div>

<div id="thumbs">
  <img class="thumb-img" src="http://placehold.it/30x30" onmouseover="displayFull(0)" onmouseout="hideFull(0)">
  <img class="thumb-img" src="http://placehold.it/30x30" onmouseover="displayFull(1)" onmouseout="hideFull(1)">
  <img class="thumb-img" src="http://placehold.it/30x30" onmouseover="displayFull(2)" onmouseout="hideFull(2)">
  <img class="thumb-img" src="http://placehold.it/30x30" onmouseover="displayFull(3)" onmouseout="hideFull(3)">

</div>

<div id="main-img">
  <img id="img-cover" src="">

</div>

Answer 1

在displayFull(i)功能中，首先将#img-cover的可见性设置为visible。您的代码有效但可见性设置为hidden，因此您无法看到结果。

Answer 2

您的代码中很少能找到问题。

1. 在hideFull() visibility: hidden您设置的visible并且再也没有fullbanner
2. 不确定为什么要使用这个fullbanner[n]的东西。希望它与这个问题无关。并且它会产生错误，因为var fullpic = new Array(4); for (var i = 0; i < fullpic.length; i++) fullpic[i] = new Image(515, 385); fullpic[0].src = "http://placehold.it/350x150"; fullpic[1].src = "http://placehold.it/350x150"; fullpic[2].src = "http://placehold.it/350x150"; fullpic[3].src = "http://placehold.it/350x150"; function displayFull(i) { document.getElementById("img-cover").src = fullpic[i].src; } function hideFull(i) { document.getElementById("img-cover").src = ""; //document.getElementById("img-cover").style.visibility = 'hidden'; }没有意义。

请查看以下代码段以供参考。

#banner-wrapper {
  position: relative;
  width: 468px;
  height: 61px;
  margin: 0 auto;
  margin-bottom: 10px;
}

#banner {
  text-align: center;
}

#thumbs {
  width: 425px;
  height: 80px;
  margin: 0 auto;
}

#main-img {
  width: 513px;
  height: 385px;
  margin: 0 auto;
  border: 1px solid black;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#img-cover {
  max-height: 385px;
  padding: 5px;
}

<div id="banner-wrapper">
</div>

<div id="thumbs">
  <img class="thumb-img" src="http://placehold.it/30x30" onmouseover="displayFull(0)" onmouseout="hideFull(0)">
  <img class="thumb-img" src="http://placehold.it/30x30" onmouseover="displayFull(1)" onmouseout="hideFull(1)">
  <img class="thumb-img" src="http://placehold.it/30x30" onmouseover="displayFull(2)" onmouseout="hideFull(2)">
  <img class="thumb-img" src="http://placehold.it/30x30" onmouseover="displayFull(3)" onmouseout="hideFull(3)">

</div>

<div id="main-img">
  <img id="img-cover" src="">
</div>

root.right.color=Color.red;