Как не влиять на элементы внутри элемента, подверженного фильтру?

Question

У меня есть <div>, на который я наложил серый фильтр, но все остальные элементы внутри <div> также пострадают от фильтра.

Даже если я попытаюсь переопределить элементы, более конкретно, например.

.div-id span { color: blue } 

в CSS не помог мне до сих пор.

Как я могу это решить?

HTML:

<div class="idea-box-tools text-center"> 
    <span class="glyphicon glyphicon-wrench"></span> 
    <p class="box-headers">Dashboard & Tools</p> 
    <p class="box-paragraphs">Lorem ipsum dolor sit amet.</p> 
</div> 

CSS:

.idea-box-tools:hover { 
    background-image: url('includes/tools.jpg'); 
    background-size: contain; 
    -webkit-filter: grayscale(80%) brightness(20%) contrast(100%);  
} 

Answer 1

Вы не можете избежать этого. Так же, как вы не можете с opacity.

Что вы можете сделать, сделав еще div внутри (с фоном и фильтром), и отобразите его под другими элементами.

.idea-box-tools:hover > :first-child { 
 
    background-image: url('http://i.telegraph.co.uk/multimedia/archive/02690/Anne-Guichard_2690182k.jpg'); 
 
    background-size: contain; 
 
    -webkit-filter: grayscale(80%) brightness(20%) contrast(100%); 
 
} 
 
.box-headers { 
 
    color: red; 
 
}

<div class="idea-box-tools text-center" style="position: relative"> 
 
    <div style="position: absolute; height: 100%; width: 100%;"></div> 
 
    <div style="position: relative"> 
 
    <span class="glyphicon glyphicon-wrench"></span> 
 
    <p class="box-headers">Dashboard & Tools</p> 
 
    <p class="box-paragraphs">Lorem ipsum dolor sit amet.</p> 
 
    </div> 
 
</div>

Answer 2

Что-то вроде этого?

.div-id { color: grey; } 
.div-id * { color: red; } 

* будет соответствовать всем элементам под DIV ..