Question

我试图制作一个具有叠加悬停效果的块（默认：弱黑色背景颜色 - 悬停：无黑色背景），中间的图标和文字始终保持相同状态。

如何让图标和文字保持相同状态（没有悬停效果）？

我已经尝试了几个规则到叠加div和图标div没有任何运气。

是否有任何css规则提供某种排除？

我设法通过将它们添加到具有叠加背景的div之外来使其工作，但是当你将鼠标悬停在图标和文本上时悬停效果会中断，它无法正常工作。

以下是代码：https://www.w3schools.com/code/tryit.asp?filename=FEMUM4N9T30Q

<style>
.media-front-top-picture{
    background-image: url("");
    height:500px;
}
     .media-front-top-icon{
        content: url(");
        width: 130px;
        margin: auto;
        padding-top: 200px;
        opacity: 1;
     }
     .media-front-txt{
        font-size: 22px;
        letter-spacing: 8px;
        color: white;
        margin-top: 15px;
     }
.media-front-bottom-picture{
    background-image: url("h");
    height:500px;
}
     .media-front-bottom-icon{
        content: url("");
        width:130px;
        margin: auto;
        padding-top: 200px;
     }

.media-picture-container {
    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);
}

.media-picture-overlay:hover {
  opacity: 0;
  cursor:pointer;
}
</style>





<div class="body-media">
<div class="media-picture-container">
    <div class="media-front-top-picture" style="border-bottom:4px solid white;">
    <div class="media-front-top-icon"></div>
    <div class="media-front-txt">VIDEOS</div>
    <div class="media-picture-overlay"></div>
</div>
</div>
<div class="media-picture-container">
     <div class="media-front-bottom-picture" style="border-bottom:4px solid white;">
     <div class="media-front-bottom-icon"></div>
     <div class="media-front-txt">PICTURES</div>
     <div class="media-picture-overlay"></div>
</div>
</div>
</div>

Answer 1

对于图标上的类，添加的z-index高于添加到overlay类的z-index。此外，请确保使图标类具有position:relative，以便应用z-index。请注意，我的示例仅将此解决方案应用于一个图标，由您决定将其应用到其他位置。

示例：

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

从背景叠加中排除div元素

1 个答案: