Предотвращение непрозрачности css от применения к дочерним элементам

Question

Я пытаюсь предотвратить свойство непрозрачности от применения к дочерним элементам.

Я был в предположении, что нижняя часть кода будет делать это, но она не работает.

.22:hover:after { 
background-color: black; 
opacity: 0.1; 
} 

Answer 1

Одно решение использует rgba:

.22:hover:after { 
    background-color: rgba(0, 0, 0, 0.1); // black with opacity 0.1 
} 

Answer 2

Причина текущее решение не работает потому, что ваш :after псевдо-элемент не имеет какой-либо набор контента (поэтому оно не отображается), и он не расположен правильно. Попробуйте это вместо этого.

.22:hover:after 
{ 
    background-color: #000; 
    opacity: 0.1;   
    content: ' '; 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    left: 0px;  
} 

Это работает, потому что элемент :after псевдо делает внутри элемента, который он предназначается, чтобы прийти после того, к тому времени позиционирования и установки этого псевдо-элемент, чтобы всегда быть такой же размер, как его родительский элемент, вы получаете родительский элемент с прозрачным фоном.

Вы также должны убедиться, что вы дочерний элемент имеет свой набор свойств position (потому что установка z-index не работает без набора в position собственности) и z-index выше, чем z-index псевдо элемента :after (1 хорошо в этот случай):

.22 > yourchildelement 
{ 
    position: relative; 
    z-index: 1; 
} 

Это должно сделать трюк для вас. Вот jsFiddle, фон установлен на черный.