CSS：hoverは親コンテナから他のスタイルをすべて削除します

Question

this penでデモンストレーションしたように、リンクのホバースタイルに問題があります。問題はなくなりますが、 #div div {background-color:blue; }のスタイルをdiv {background-color:blue; }に変更すると

Answer 1

CSS内の2番目のdivを削除するだけです。あなたの問題は、#div divによって引き起こされます。実際には、CSSではdiv INSIDEの親divです。今、あなたはそれを持っていません。

#div { 
 
    background-color: blue; 
 
} 
 
a:hover { 
 
    color: red; 
 
}

<div id="div"> 
 
    <a>Yo!</a> 
 
</div>