我怎樣才能使圖像隱藏在鼠標移出

Question

嘿，我有這個網站，你將鼠標放在縮略圖上，而較大的圖像出現在下面，當你將鼠標移出時，我希望圖像被隱藏。然而，無論何時我第一次將鼠標懸停在圖像上，然後當我將鼠標移出圖像時消失。但是，當我將鼠標懸停在任何縮略圖之後，圖像不再出現。我該如何解決。

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; 
 

 
}

#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"> 
 
    <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

Answer 1

看看這兩項堆棧溢出問題： Show/hide image with JavaScript和 Hiding and displaying an image in mouse over action in a div。使用他們的代碼，然後根據自己的喜好進行更改。