背景のオーバーレイからdiv要素を除外します

Question

オーバーレイのホバー効果（デフォルト：弱い黒の背景色 - ホバー：なしの黒い背景）を持つブロックを作成しようとしていて、同じ状態にとどまるアイコンとテキスト方法。

アイコンとテキストを同じ状態（ホバー効果なし）にするにはどうすればよいですか？

Iveはオーバーレイの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-率よりも高いZインデックスを追加します。ここでは

コードがあります。また、アイコンクラスが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; 
}