Javascript 光滑转盘式独立覆盖层 解释

我试图在鼠标悬停时在滑块（）的每个图像上设置一个覆盖，但由于某些原因，当我将其悬停时，覆盖显示在滑块顶部（所有12个图像），而不是悬停的图像

代码 你也可以在中看到它

ps：最好在全屏上看到覆盖内容

$（'.carousel'）。光滑({
箭头：错，
点：是的，
幻灯片错误：3，
行数：3
});
.carousel包装器{
背景色：rgb（235235235）；
位置：相对位置；
}
img{
背景色：黑色；
}
.滑滑梯{
文本对齐：居中！重要；
}
.覆盖{
位置：绝对位置；
身高：100%；
宽度：100%；
排名：0；
左：0；
背景：rgba（1,1,1,35）；
过渡：0.2s；
不透明度：0；
}
.覆盖：悬停{
不透明度：1；
}
.覆盖内容{
颜色：rgb（255、255、255）；
位置：绝对位置；
最高：50%；
左：50%；
}



























为什么它不工作？
您的代码无法按预期工作，因为您的覆盖是相对于
.carousel wrapper
而不是
a
元素定位的（
.carousel wrapper
是
.overlay
的第一个父级，它具有
位置
，而不是
静态
——如果不明确设置
位置
，则默认为
静态
）

今后如何避免这一错误？
如果您希望网站上的任何元素都有一个覆盖（或者通常您希望在某处使用
position:absolute
）您需要记住，此元素将相对其父元素进行定位，父元素具有
位置：相对
或
位置：绝对
。如果没有这样的元素，它将自身定位到

这里有很好的解释：

请记住，这些值将相对于下一个父元素
具有相对（或绝对）定位。如果没有这样的父级，
它将一直默认备份到元素本身
这意味着它将相对页面本身放置

（关于绝对定位）


检查工作演示：

为什么它不起作用？
您的代码无法按预期工作，因为您的覆盖是相对于
.carousel wrapper
而不是
a
元素定位的（
.carousel wrapper
是
.overlay
的第一个父级，它具有
位置
，而不是
静态
——如果不明确设置
位置
，则默认为
静态
）

今后如何避免这一错误？
如果您希望网站上的任何元素都有一个覆盖（或者通常您希望在某处使用
position:absolute
）您需要记住，此元素将相对其父元素进行定位，父元素具有
位置：相对
或
位置：绝对
。如果没有这样的元素，它将自身定位到

这里有很好的解释：

请记住，这些值将相对于下一个父元素
具有相对（或绝对）定位。如果没有这样的父级，
它将一直默认备份到元素本身
这意味着它将相对页面本身放置

（关于绝对定位）


检查工作演示：

将锚定标记和覆盖内容包装在一个单独的div和样式中，如下所示。原因是您没有在框之间的空白处使用右边距。您只是使用固定的with
li
标记，图像在父容器中留有间隙。如果放置覆盖，您将看到覆盖在白色间隙和图像上（我相信这不是你想要的）

请参阅下面的代码片段


$（'.carousel'）。光滑({
箭头：错，
点：是的，
幻灯片错误：3，
行数：3
})；
.carousel包装器{
背景色：rgb（235235235）；
位置：相对位置；
}
img{
背景色：黑色；
}
.滑滑梯{
文本对齐：居中！重要；
}
.覆盖{
位置：绝对位置；
身高：100%；
宽度：100%；
排名：0；
左：0；
背景：rgba（1,1,1,35）；
过渡：0.2s；
不透明度：0；
背景：红色；
z指数：1；
}
.覆盖：悬停{
不透明度：1；
}
.覆盖内容{
颜色：rgb（255、255、255）；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
a{
位置：相对位置；
显示：内联块；
}
a:悬停，覆盖{
不透明度：1
}
.img_cont{
位置：相对位置；
}