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 有两个兄弟组合子：

相邻组合器影响“直接邻居”：

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 */