html - 1 つの div をホバリングしながら 2 つの要素を変更する

Question

どこにも答えが見つからない質問をしたいです。とても単純だと思いますが、これら 2 つの CSS 文 (または関数、わかりません) を 1 つにまとめるにはどうすればよいでしょうか?

.key:hover p{
    color:red;
}

.key:hover {
    background-color: #999999;
}

前もって感謝します。

Answer 1

以下はおそらくあなたが求めているものです。このソリューションは、他のソリューションと同様に、既に存在する可能性のある他の適用可能な CSS 定義の影響を受けます。

.key:hover {
    color:red;
    background-color: #999999;
}

Answer 2

おそらく、マウスが正確にホバーされたときにのみホバー機能をトリガーしたいでしょうが、ライブデモ<p>でわかるようにこれは不可能です

.key
{
    background-color: green;
    width: 250px;
    height: 250px;
}

.key:hover {
    background-color: red;


}
.key:hover p{
    background-color: blue;
}