Тег не уважая фоновый цвет RGBA непрозрачности

Question

У меня странная ситуация:

В приведенном ниже фрагменте кода, когда я пытаюсь применить rgba цвет моей тег, он действует так, как будто это rgb цвет , а не rgba. Таким образом, фон текста является сплошным, но остальная часть фона (которая находится от span, а не a) имеет правильную непрозрачность.

Я знаю, что могу отделить запросы :hover, и это решит проблему, но мне интересно, почему она это делает? Что я делаю не так?

span { 
 
    display: inline-block; 
 
    padding: 5px; 
 
    border: 2px solid #00bcd4; 
 
    border-radius: 5px; 
 
    margin: 5px; 
 
    background: #ffffff; 
 
    cursor: pointer; 
 
} 
 
span a { 
 
    text-decoration: none; 
 
    color: #00bcd4; 
 
} 
 
span:hover, 
 
span:hover a { 
 
    background: rgba(0, 188, 212, 0.5); 
 
    color: #ffffff; 
 
}

<span><a href="">Link</a></span>

Answer 1

span:hover, 
span:hover a { 
    background: rgba(0, 188, 212, 0.5); 

Это означает, что вы установили 50% непрозрачности фона на пролете и на "а" внутри него. На «а» вы увидите 50-процентный фон, на фоне промежутка позади него, поэтому он станет темнее.

Решение:

span { 
 
    display: inline-block; 
 
    padding: 5px; 
 
    border: 2px solid #00bcd4; 
 
    border-radius: 5px; 
 
    margin: 5px; 
 
    background: #ffffff; 
 
    cursor: pointer; 
 
} 
 
span a { 
 
    text-decoration: none; 
 
    color: #00bcd4; 
 
} 
 
span:hover { 
 
    background: rgba(0, 188, 212, 0.5); 
 
} 
 
span:hover a { 
 
    color: #ffffff; 
 
}

<span><a href="">Link</a></span>

Answer 2

Попробуйте добавить непрозрачность: 0,5; в

span:hover, 
span:hover a { 
    background: rgba(0, 188, 212, 0.5); 
    color: #ffffff; 
} 

Answer 3

Применить фон только к диапазону и цвет привязки.

span:hover { 
    background: rgba(0, 188, 212, 0.5); 
} 
span:hover a { 
    color: #ffffff; 
} 

JsFiddle