Ein Tag nicht Hintergrundfarbe rgba Opazität respektieren

Question

Ich habe eine seltsame Situation geraten:

Im Snippet unten, wenn ich versuche, und wenden eine rgba Farbe meiner einem Tag, wirkt es, als ob es sich um eine rgb Farbe , kein rgba. So ist der Texthintergrund fest, aber der Rest des Hintergrunds (der von der span nicht die a ist) hat die korrekte Opazität.

Ich weiß, ich kann die :hover Abfragen trennen und es wird das Problem lösen, aber ich frage mich, warum es das tut? Was mache ich falsch?

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); 

Das heißt, Sie setzen eine 50% ige Opazität Hintergrund auf der Spanne und auf dem "a" im Inneren. Auf dem "a" werden Sie einen Hintergrund von 50% sehen, mit dem Hintergrund der Spannweite dahinter, so dass es dunkler erscheint.

Lösung:

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

Versuchen Zugabe Opazität: 0,5; in

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

Answer 3

Anwenden Hintergrund nur Spannweite und Farbe auf den Anker Link.

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

JsFiddle