Javascript 悬停效果在图像下方

所以我在努力解决悬停效应。黑匣子就是图像，我希望当用户将鼠标悬停在图像上时，具有相同宽度和高度的红色遮罩颜色放置在黑匣子前面，我不能这样做，因为每当我将鼠标悬停在该图像上时，效果似乎就在图像下方。。。。

.第三种效果.面具{ 不透明度：0； 溢出：可见； 边框：100px实心rgba0,0,0,0.7； -moz框大小：边框框； -webkit框大小：边框框； 框大小：边框框； -webkit过渡：所有0.4s易入易出； -moz转换：所有0.4易入易出； -o型过渡：所有0.4s易于输入输出； -ms转换：所有0.4s易进易出； 过渡：所有0.4缓进缓出； 宽度：274px； 高度：197px； } .第三效果a.info{ 位置：相对位置； 顶部：-10px； 不透明度：0； -webkit过渡：不透明度0.5s 0秒，易于输入输出； -moz过渡：不透明度0.5s，0秒缓进缓出； -o型过渡：不透明度0.5s 0缓进缓出； -ms转换：不透明度0.5s 0缓进缓出； 过渡：不透明度0.5s 0缓进缓出； } .第三个效果：悬停.遮罩{ 不透明度：1； 边框：100px实心rgba0,0,0,0.7； } .第三个效果：悬停a.info{ 不透明度：1； -moz转换延迟：0.3s； -webkit转换延迟：0.3s； -o-转换延迟：0.3s； -ms转换延迟：0.3s； 过渡延迟：0.3s； }

---

在css中，当鼠标悬停时，可以使用：hover选择器修改元素的样式

看看这个例子，看看如何使用它。

.第三种效果.面具{ 不透明度：0； 溢出：可见； 边框：100px实心rgba0,0,0,0.7； -moz框大小：边框框； -webkit框大小：边框框； 框大小：边框框； -webkit过渡：所有0.4s易入易出； -moz转换：所有0.4易入易出； -o型过渡：所有0.4s易于输入输出； -ms转换：所有0.4s易进易出； 过渡：所有0.4缓进缓出； 宽度：274px； 高度：197px； } .第三效果a.info{ 位置：相对位置； 顶部：-10px； 不透明度：0； -webkit过渡：不透明度0.5s 0秒，易于输入输出； -moz过渡：不透明度0.5s，0秒缓进缓出； -o型过渡：不透明度0.5s 0缓进缓出； -ms转换：不透明度0.5s 0缓进缓出； 过渡：不透明度0.5s 0s缓进缓出；} .第三个效果：悬停.遮罩{ 不透明度：1； 边框：100px实心rgba0,0,0,0.7； } .第三个效果：悬停a.info{ 不透明度：1； -moz转换延迟：0.3s； -webkit转换延迟：0.3s； -o-转换延迟：0.3s； -ms转换延迟：0.3s； 过渡延迟：0.3s； }

---

我不确定你是否希望覆盖的div是可点击的还是什么。您可以使用javascript来设置内容。所以你可以给悬停添加一个透明的颜色，它会用某种颜色遮住悬停。例如：用红色设置不透明度0.8

还有我的方法

这样，如果您不想将单击处理程序绑定到实际项目，则可以将其绑定到覆盖的div

编辑：在这里你可以看到它使用不透明。。。。你需要做的就是让图像出现在那里，而不是像我在最简单的例子中所做的那样出现红色背景

编辑2：这是另一把小提琴，实际上使用的是图像：

你可以这样做

形象{ 背景图片：url'http://lorempixel.com/400/200/'; 宽度：300px； 背景尺寸：封面； 高度：300px； } 图片：悬停{ 背景色：红色； 背景图像：无； }

---

请发布你的编码：如果你使用绝对定位，那么在你的面具样式中添加z-index:10。你不应该发布答案，如果你在解决问题方面有任何进展，你应该在问题中更新答案。

<div id="outer">
    <div id="image"></div>
    <div id="hover"></div>
</div>

#image {
    background-color:red;
}
#hover {
    position:absolute;
    background-color: blue;
}
div > div {
    width: 100px;
    height: 100px;
    top: 0px;
    left: 0px;
}
#outer {
    position:relative;
    left: 250px;
    top: 250px;
}