如何阻止孩子繼承父母過濾器屬性？

Question

如果我在父級上使用 css filter屬性，那么它也會影響子級。 當我在父級中設置屬性filter時，我想阻止子級不生效。

 article { width: 300px; height: 300px; position: relative; } article:hover { filter: contrast(110%); } img { width: 300px; height: 300px; } div { width: 200px; height: 50px; background: #FCDBA3; position: absolute; bottom:0; }

 <article> <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" /> <div></div> </article>

如果你仔細觀察！ 您可以看到，當我將鼠標懸停在文章上時，div 標簽也會因為 filter 屬性而受到影響。 但是當我將鼠標懸停在文章上時，我不希望 div 受到影響。

我怎樣才能實現它？

Answer 1

據我了解，您想在文章標簽中制作懸停效果，但不包括 div 元素，您可以使用它

article :not(div):hover{
  filter: contrast(110%);
}

代替

article:hover {
  filter: contrast(110%);
}

Answer 2

您總是可以在偽元素上使用backdrop-filter ，然后使用一點 z-index，您可以創建一個高於背景過濾器的類。 請參閱示例，任何具有.noFilter類的項目在懸停時都不會受到影響

 article { padding: 2rem; overflow: hidden; position: relative; } article::before { backdrop-filter: contrast(100%); content: ""; display: block; position: absolute; inset: 0; z-index: 3; transition: backdrop-filter 500ms 0ms ease-in-out; } img { height: auto; width: auto; min-height: 100%; min-width: 100%; position: absolute; inset: 50%; transform: translate(-50%, -50%); z-index: 1; } div { background: #FCDBA3; padding: 0.5rem; width: 200px; position: relative; z-index: 2; } .noFilter { z-index: 4; } article:hover::before { backdrop-filter: contrast(150%); }

 <article> <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" /> <div>Some content here</div> <div>Some content here</div> <div class="noFilter">Not affected by filter</div> <div>Some content here</div> <div class="noFilter">Not affected by filter</div> <div>Some content here</div> <div>Some content here</div> </article>

Answer 3

除了其他有用的答案之外，從技術上講，您的問題是“如何阻止孩子繼承父母過濾器屬性？” 答案是子元素不繼承該屬性但受其影響，除了將過濾器應用於另一個元素（如其他答案所建議的那樣）之外，沒有辦法阻止它。

舉一個類似但更簡單的例子，如果將值小於1的opacity屬性應用於元素，則任何子元素都無法獲得比其父元素更高的不透明度。