html - css hover が前の要素に対して機能しない

Question

要素にカーソルを合わせると、別の要素のプロパティを変更したいと考えています。これまでのところ、次の CSS を思いつきました。

#test3:hover #test4
{
background-color: red;
}

<div id="test3">three</div>
<div id="test4">four</div>

ただし、これは機能していません。これはまったく可能ですか？何を提案しますか？

Answer 1

#test3:hover #test4

test4これは、 の子である要素をターゲットにすることを意味しtest3ます。代わりに+ 兄弟セレクターが必要です。

#test3:hover + #test4
{
background-color: red;
}

ブラウザ対応表