影响错误元素的 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;
}