Html CSS解决方案，将黑色覆盖在页面的其余部分_Html_Css

Html CSS解决方案，将黑色覆盖在页面的其余部分

html css

Html CSS解决方案，将黑色覆盖在页面的其余部分,html,css,Html,Css,我想在用户将鼠标悬停在图像上时突出显示该图像要做到这一点，我想在其他所有东西上加一个覆盖层（或者说实话，我很乐意在包括图像在内的所有东西上加一个覆盖层，然后再加上一些东西来照亮图像）在没有JS的情况下，是否还有其他方法可以做到这一点？我很乐意使用JS解决方案，如果这是所有可用的，但我想知道是否有任何CSS专用的伎俩可以做到这一点示例HTML如下所示： <body> <div> <Other Elements /> <img src="...." /

我想在用户将鼠标悬停在图像上时突出显示该图像

要做到这一点，我想在其他所有东西上加一个覆盖层（或者说实话，我很乐意在包括图像在内的所有东西上加一个覆盖层，然后再加上一些东西来照亮图像）

在没有JS的情况下，是否还有其他方法可以做到这一点？我很乐意使用JS解决方案，如果这是所有可用的，但我想知道是否有任何CSS专用的伎俩可以做到这一点

示例HTML如下所示：

<body>
<div>
<Other Elements />
<img src="...." />
</div>
</body>

最好是所有东西都变暗，除了

标记。

您可以使用同级选择器：

.container img:hover~.overlay{background color:rgba（0,0,0,0.8）；}

正文{
}
.集装箱{
位置：相对位置；
文本对齐：居中；
保证金：10px自动0；
垫底：10px；
}
.集装箱.其他{
显示：内联块；
保证金：20px 10px 10px；
宽度：100px；
高度：100px；
背景色：达克朗格；
z指数：1；
}
.集装箱img{
显示：内联块；
保证金：10px 10px 10px；
z指数：1；
位置：相对位置；
过渡：所有300毫秒缓解；
}
.覆盖{
背景色：rgba（0,0,0,0）；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
指针事件：无；
z指数：1；
过渡：所有300毫秒缓解；
}
.container img:hover~.overlay{
背景色：rgba（0,0,0,0.8）；
}
.集装箱图片：悬停{
z指数：2；
转换：比例（1.1）；
光标：指针；
}

这肯定不是我想要的。我不想将一个图像覆盖在另一个图像上。当我将鼠标悬停在div或img.Hrm上时，我想使屏幕的其余部分变暗，这样我的简化示例就可以这样做，但它是否可以用于嵌套图像？我已经在至少六个div中找到了这个图像，它可以与同级一起工作，因此同级选择器——针对树中的元素是覆盖层的同级

.container.yourSiblingsOfOverlay:hover~.overlay{background color:rgba（0,0,0,0.8）；}

然后将这些兄弟的嵌套图像作为目标：

.container.yourSiblingsOfOverlay:hover img{z-index:2；变换：比例（1.1）；光标：指针；}