css - CSSを使用して別のDivにカーソルを合わせると、複数のdivスタイルが変更されます

Question

#main にカーソルを合わせると、#box と #box2 のスタイルを変更したい。しかし、それは機能していません。

HTMLコードは

<div id="main">Main</div>
<div id="box">Text</div>
<div id="box1" >Text1</div>

CSSは

#main:hover + #box,#box1 {
    background-color: green;
}

ここにデモリンクがあります

Answer 1

次のことをお勧めします。

#main:hover + #box,
#main:hover ~ #box1 {
    /* CSS */
}

JS フィドルのデモ。

もともとあなたが抱えていた問題は、2 つのセレクターでした。

#main:hover + #box,
#box1 {
    background-color: green;
}

最初のものは機能しましたが、残念ながらコンマはセレクター全体を区切ります。影響を受ける子孫/兄弟のコンマ区切りのリストは提供しません。そのため、#box1はの上だけではなく、常に:hover背景色でし#mainた。

私が使用したコンビネータは、隣接兄弟コンビネータ ( +) と一般兄弟コンビネータ ( ~) であり、後者は#mainの与えられた後の兄弟に影響を与えidますbox1。

で書かれた 2 番目の規則は、複数 (この場合は 2 つ) の隣り合った兄弟コンビネータを使用して要素の正確なシーケンスを指定することで書き直す ~ ことができ、次のようになります。

#main:hover + #box,
#main:hover + #box + #box1 {
    /* CSS */
}

しかし、これは時間の経過とともにますます壊れやすくなり、HTML 構造が変更されたり、関連する要素の間に新しい要素が挿入されたりすると、メンテナンスがより困難になります。

参考文献:

• CSS セレクター。