タグは、私は奇妙な状況を持っている背景色のRGBAの不透明度

Question

を尊重していません、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％の不透明度の背景を設定することを意味します。 「a」には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。 in

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