Question

嘿，我有这个网站，你将鼠标放在缩略图上，下方会出现较大的图像，当你鼠标移出时，我希望隐藏图像。然而，每当我第一次鼠标悬停时图像出现，然后当我鼠标移出时图像消失。但是，当我将鼠标悬停在任何缩略图之后，图像将不再出现。我该如何解决这个问题。

＆＃13;

var fullpic = new Array(4);

for (var i = 0; i < fullpic.length; i++)

  fullpic[i] = new Image(515, 385);

fullpic[0].src = "images/FrenchQuarter.jpg";
fullpic[1].src = "images/GoldenGateBridge.jpg";
fullpic[2].src = "images/NazarethBay.jpg";
fullpic[3].src = "images/TheAlamo.jpg";


function displayFull(i) {


  document.getElementById("img-cover").src = fullpic[i].src;
}

function hideFull(i) {
  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 = "images/banner1.gif";
fullbanner[1].src = "images/banner2.gif";
fullbanner[2].src = "images/banner3.gif";
fullbanner[3].src = "images/banner4.gif";

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;

}

＆＃13;

#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;
}

＆＃13;

<div id="banner-wrapper">
  <img id="banner" src="images/banner1.gif">
</div>
<div id="thumbs">
  <img class="thumb-img" src="images/FrenchQuarter_small.jpg" onmouseover="displayFull(0)" onmouseout="hideFull(0)">
  <img class="thumb-img" src="images/GoldenGateBridge_small.jpg" onmouseover="displayFull(1)" onmouseout="hideFull(1)">
  <img class="thumb-img" src="images/NazarethBay_small.jpg" onmouseover="displayFull(2)" onmouseout="hideFull(2)">
  <img class="thumb-img" src="images/TheAlamo_small.jpg" onmouseover="displayFull(3)" onmouseout="hideFull(3)">
</div>
<div id="main-img">
  <img id="img-cover" src="">
</div>

<!-------------------CSS---------------------------------------->

#banner-wrapper

＆＃13;

Answer 1

查看这两个Stack Overflow问题： Show/hide image with JavaScript和 Hiding and displaying an image in mouse over action in a div。使用他们的代码，然后根据自己的喜好进行更改。

如何在mouseout上隐藏图像

1 个答案: