Question

我正在设置一个网页，以便它上面有多个图像，每个图像上都有50％的不透明蒙版。当掩模被遮盖时，它应该消失，然后当鼠标离开图像（掩模下方）时，掩模应该重新出现。当我在我的img内对div进行一次img测试时效果很好，但当我添加第二个id时，消失函数会影响图像而没有<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"/>  </div>，这是让我很困惑。

HTML：

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

CSS：

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

JS：

div

编辑：Roko问为什么我在纯CSS中没有这样做。除了我没有考虑如何正确配置图像这一事实，当我最终完成这个页面时，我会想要有面具＆＃39;链接＆＃39;，我鼠标悬停在一个面具上消失。我不确定在纯CSS中是否可行。

编辑＃2：事实证明，该功能正如所写。只是因为我对每行图像都有一个{{1}}，当行中的第一个图像出现时，其他一切都滑过了，因此我的编码很差。

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

Javascript影响错误的元素

1 个答案: