如何從鼠標懸停的佔位符中刪除圖像

我已經發布了這個問題，但仍不能得到它。每當我第一次在任何較小的圖像上懸停時，較大的圖像出現在佔位符上，每當我將鼠標移出圖像時，佔位符圖像都是空白，這是我想要的。但是，只做一次後，只要我將鼠標懸停在任何小圖像上，它就不會再出現，只有在第一次請求幫助時纔有效。如何從鼠標懸停的佔位符中刪除圖像

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>

來源

2016-11-10 Web-Student214

[現在，您可以格式化你的代碼，以便它是一個可運行的代碼片斷，使我們更容易調試代碼（https://stackoverflow.blog/2014/09/介紹 - runnable-javascript-css和html代碼片段/） – nicovank

在hideFull中，您將圖像的可見性設置爲隱藏。在showFull中，您不會重置*隱藏的可見性*。您需要再次使其可見。 – amadan

謝謝你沒有意識到我必須這樣做，我做了 –

在你displayFull(i)功能，設置#img-cover到visible第一的知名度。您的代碼有效，但可見性設置爲hidden，因此您無法看到結果。

來源

2017-10-15 04:48:57

在代碼中找不到幾個問題。

在hideFull()要設置visibility: hidden，再次
不知道你爲什麼要使用此fullbanner事情從來就沒有visible。希望它與這個問題無關。它會產生錯誤，因爲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>

來源

2017-10-15 06:05:58

如何從鼠標懸停的佔位符中刪除圖像

回答

相關問題