Javascript影響錯誤的元素

Question

我正在設置一個網頁，以便它上面有多個圖像，並且每個圖像都有50％的不透明蒙版。當掩模被掩蓋時，它應該消失，然後當鼠標離開圖像時（掩模下面），掩模應該重新出現。當我在我的div裏面測試一個img時，這個效果很好，但是當我添加第二個img時，消失功能影響了圖像，沒有id，這很讓我困惑。

HTML：

<div id="images"> 
    <img id="testimage1" src="url" onmouseover="appear1()"/> 
    <img src="url"/> 
</div> 
<div id="masks"> 
    <img id="testmask1" src="url" onmouseover="disappear1()"/> 
    <img src="url"/> <!-- This is the one that disappears --> 
</div> 

CSS：

#images{ 
    position:absolute; 
    top:0px; 
} 
#masks{ 
    position:absolute; 
    top:0px; 
} 

JS：

function disappear1(){ 
    //Makes the first test mask disappear. This is a test function. 
    document.getElementById("testmask1").style.display = 'none'; 
} 

function appear1(){ 
    //Makes the first test mask appear. This is a test function. 
    document.getElementById("testmask1").style.display = 'block'; 
} 

編輯：ROKO問我爲什麼不這樣做的純CSS。除了我沒有考慮如何正確配置圖像這個事實，當我最終完成這個頁面時，我會想要掩碼「鏈接」，我將鼠標放在一個掩碼上，並且都消失。我不確定這在純CSS中是可能的。

編輯＃2：事實證明，該功能正在寫作。這只是因爲我爲每一行圖像都有一個單獨的div，當這一行中的第一張圖像出現時，其他所有內容都滑過了，因此我的編碼很差。

Answer 1

請勿複製您的ID。 ID應該是每頁獨一無二的。
另外，爲什麼不在純粹的CSS？ （沒有JS需要）

jsBin demo

<div class="imgBox"> 
    <img src="cat.jpg"> 
    <img src="mask.png"> 
</div> 
<div class="imgBox"> 
    <img src="bear.jpg"> 
    <img src="mask.png"> 
</div> 
<div class="imgBox"> 
    <img src="elephant.jpg"> 
    <img src="mask.png"> 
</div> 

CSS：

.imgBox{ 
    position:relative; 
    /*width, height etc... */ 
} 
.imgBox img{ 
    position:absolute; 
    top: 0; 
    transition: opacity 0.5s; /* yey! */ 
} 
.imgBox:hover img + img{ /* on hover target the second image */ 
    opacity: 0; 
}