html - 同じレベルの別の要素にカーソルを合わせたときにテキストの色を変更する

Question

.fooユーザーがホバーしたときのテキストの色を変更しようとしていますが.bar、CSS だけでこれを行う方法がわかりません。CSS先行要素セレクターを使用しようとしました~が、うまくいきませんでした。

<div>
  <p class="foo">Foo</p>
  <ul class="bar"><li>Bar<li></ul>
</div>

.bar:hover~.foo {
    color: red;
}

編集 - 私の要件が変更されました。HTML 構造を更新して.bar、<ul>

score 0 · Accepted Answer

これを CSS で行う方法を次に示します (CSS3 は必要ありません)。

div:hover p{
    color: red;
}
.foo:hover{
    color: black;
}
div:hover p.bar{
    color: black;
}

3 に答える 3