html - 別の要素にカーソルを合わせて要素のスタイルを変更する

Question

目標

CSS で別の要素をホバーして、要素を変更します。

構文がわかりません。何か案は？

.frameホバリングで変更したい .app > a。CSS 構文は以下にスポットライトを当てています。

.app a:hover ->¹ .frame {
    background-color: yellow;
}

.frame {
    background-color: blue;
    width: 300px;
    height: 300px;
}

¹ただのイラストです。

score 3 · Accepted Answer

これを試着してサイズを確認してください：

.app:hover ~ .frame {
    background-color: yellow;
}

.frame {
    background-color: blue;
    width: 300px;
    height: 300px;
}