Html 从背景覆盖中排除div元素 我试图用覆盖悬停效果（默认：弱黑色背景颜色-悬停：没有黑色背景）和中间的图标和文本一直保持在同一状态。

如何使图标和文本保持相同的状态（无悬停效果）

我尝试了几个规则，覆盖div和图标div没有任何运气

有没有提供某种排除的css规则

我通过将它们添加到具有覆盖背景的div之外，成功地实现了这一点，但效果并不理想，当您将鼠标悬停在图标和文本上时，悬停效果会中断

代码如下：

.媒体正面图片{
背景图片：url（“”）；
高度：500px；
}
.媒体前端顶部图标{
内容：网址（“）；
宽度：130px；
保证金：自动；
填充顶部：200px；
不透明度：1；
}
.media front txt{
字体大小：22px；
字母间距：8px；
颜色：白色；
边缘顶部：15px；
}
.媒体正面底图{
背景图片：url（“h”）；
高度：500px；
}
.媒体前端底部图标{
内容：url（“”）；
宽度：130px；
保证金：自动；
填充顶部：200px；
}
.媒体图片容器{
位置：相对位置；
}
.媒体图片覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
过渡：放松；
背景色：rgba（0,0,0,0.47）；
}
.媒体图片覆盖：悬停{
不透明度：0；
光标：指针；
}
录像带
图片

对于图标上的类，添加一个比添加到覆盖类中的z索引更高的z索引。此外，确保图标类具有

位置：相对

，以便应用z索引。注意，我的示例仅将此解决方案应用于一个图标，由您在其他位置应用它

例如：

 .media-front-top-icon{
    content: url("example.com");
    width: 130px;
    margin: auto;
    padding-top: 200px;
    opacity: 1;
    z-index:10;
    position:relative;
 }

.media-picture-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: .5s ease;
    background-color: rgba(0, 0, 0, 0.47);
    z-index:5;
}

---

太棒了，谢谢！这完全符合我的要求，我现在不得不在z-index上读自己的文章，发现它改变了元素的顺序，这非常简洁。CSS总是让我感到惊讶。@Normar sweet。别忘了接受和投票你喜欢的答案，这样人们就会继续回答你的问题。：）

 .media-front-top-icon{
    content: url("example.com");
    width: 130px;
    margin: auto;
    padding-top: 200px;
    opacity: 1;
    z-index:10;
    position:relative;
 }

.media-picture-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: .5s ease;
    background-color: rgba(0, 0, 0, 0.47);
    z-index:5;
}