CSS設置其他兄弟DIV透明的而不是我目前徘徊

Question

當我將鼠標懸停1個格，使我想要做的是僅此兄弟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 demo, using :nth-child(1)。

JS Fiddle demo, using :first-child。

懸停在DIV 1和影響DIV 3：

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

JS Fiddle demo, using :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; 
} 

here is a jsfiddle

Answer 3

CSS有兩個sibling combinators：

相鄰組合子影響了「直接鄰居「：

個

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