css设置其他兄弟div透明，但目前不是我悬停

Question

我想做的是，当我悬停1div，并使只有这个兄弟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提琴演示，使用:nth-child(1) .

JS小提琴演示，使用:first-child .

悬停在DIV 1上并影响DIV 3:

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

JS demo，使用: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;
}

这里有一个jsfield

Answer 3

CSS有两个兄弟组合符:

相邻组合子影响"直接邻居":

div + div

两个序列所表示的元素具有相同的父元素在文档树和由第一个序列表示的元素中紧接在第二个元素之前。

一般组合子影响"一般邻居":

div ~ div

两个序列所表示的元素在文档树和由第一个序列表示的元素表示的元素的前面(不一定立即)第二个。

根据你的需要，你可以使用一个或另一个。

你的问题很模糊，但其中一个可能对你有用:

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