Как сделать эффект зависания не применимым к: перед псевдоселектором?

Question

У меня довольно простая ссылка, которая отображается как блок с маленькой зеленой звездой в углу.

JsFiddle

Я хочу сделать так, чтобы при наведении курсора на ссылку, сама ссылка идет слегка прозрачной, но селектор :before псевда не будет затронут.

Я смотрел на это questions, но по какой-то причине я не мог заставить их решения работать. Это возможно? Я не уверен, что я просто пишу неправильные селектор CSS.

EDIT: В идеале я хочу иметь возможность обрабатывать как фоновые изображения, так и цвета фона.

Answer 1

Используйте вместо этого значения rgba(r, g, b, a).

:hover изменить значение альфа.

a { 
 
    display: block; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: rgba(255, 0, 0, 1); 
 
    position: relative; 
 
} 
 
a:before { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    color: white; 
 
    content: "★"; 
 
    background: green; 
 
} 
 
a:hover { 
 
    background: rgba(255, 0, 0, 0.5); 
 
}

<a href="www.google.com"></a>

---

Если вы имеете дело с изображениями, вы не можете реально изменить непрозрачность изображения без затрагивать родителя. Если вы действительно хотите использовать псевдоселектор, вы можете создать контейнер вокруг элемента, присоедините к нему селектор :before и примените состояние hover только к внутреннему элементу.

div { 
 
position: relative; 
 
} 
 

 
a { 
 
    display: block; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: url(http://suptg.thisisnotatrueending.com/archive/19343530/images/1338832441002.png); 
 
} 
 

 
div:before { 
 
    position: absolute; 
 
    top:0; 
 
    left:0; 
 
    color:white; 
 
    content:"★"; 
 
    background: green; 
 
    z-index: 2; 
 
} 
 

 
a:hover { 
 
opacity: 0.5; 
 
}

<div> 
 
    <a href="www.google.com"></a> 
 
</div>

Вот пример jsFiddle