html - cssは他の兄弟divを透明に設定しますが、現在はホバーしていません

Question

私がやりたいのは、1 div をホバーし、この兄弟 div のみを透明にするときです

<div>DIV 1</div>
<div>DIV 2</div>
<div>DIV 3</div>

cssは何ですか??

Answer 1

HTML を考えると:

<div>DIV 1</div>
<div>DIV 2</div>
<div>DIV 3</div>

にカーソルを合わせDIV 1て影響を与えるにはDIV 2:

div:nth-child(1):hover + div
/* or:
div:first-child:hover + div
*/ {
    background-color: #ffa;
}

を使用した JS Fiddle デモ:nth-child(1)。

を使用した JS Fiddle デモ:first-child。

にカーソルを合わせDIV 1て影響を与えるにはDIV 3:

div:nth-child(1):hover + div + div {
    background-color: #ffa;
}

を使用した JS Fiddle デモ:nth-child(1)。

Answer 2

コンテナの使用はどうですかdiv：

<div id="outer">
    <div>DIV 1</div>
    <div>DIV 2</div>
    <div>DIV 3</div>
</div>

そしてCSS：

#outer:hover div {
    opacity: .5;
}
#outer:hover div:hover {
    opacity: 1;
}

ここにjsfiddleがあります

Answer 3

CSS には 2 つの兄弟コンビネータがあります。

隣接するコンビネータは「直接の隣人」に影響を与えます:

div + div

2 つのシーケンスで表される要素は、ドキュメント ツリー内で同じ親を共有し、最初のシーケンスで表される要素は、2 番目のシーケンスで表される要素の直前にあります。

一般的なコンビネータは「一般的な隣人」に影響を与えます:

div ~ div

2 つのシーケンスで表される要素は、ドキュメント ツリー内で同じ親を共有し、最初のシーケンスで表される要素は、2 番目のシーケンスで表される要素の前 (必ずしもすぐではない) にあります。

必要なものに応じて、どちらか一方を使用できます。

あなたの質問は非常に漠然としていますが、次のいずれかがうまくいく可能性があります。

div:hover + div  /* affects adjacent div */
div:hover ~ div  /* affects all sibling divs */
div:first-child:hover +|~ div /* only triggers on your first div */