如何影响下一个元素和元素后

Question

这大概很容易实现，但我无法弄清楚如何去做。我想，当你将鼠标悬停在第一个元素上时，改变第二个和第三个元素的不透明度（使它们出现）。

JSFiddle

.two{ 
 
    opacity:0; 
 
} 
 
.three{ 
 
    opacity:0; 
 
} 
 
.one:hover + .two, .one:hover + .three{ 
 
    opacity:1; 
 
}

<div class = "one"> 
 
    <h1>one</h1> 
 
</div> 
 
<div class = "two"><h1>two</h1></div> 
 
<div class = "three"><h1>three</h1></div>

然后，我会希望有这样的事情：

.one:hover + .two, ++.three{ 
    opacity:1; 
} 

Answer 1

你可以使用General sibling selector（JSFiddle）：

.two { 
 
    opacity: 0; 
 
} 
 

 
.three { 
 
    opacity: 0; 
 
} 
 

 
.one:hover ~ .two, .one:hover ~ .three { 
 
    opacity: 1; 
 
}

<div class = "one"> 
 
    <h1>one</h1> 
 
</div> 
 
<div class = "two"> 
 
    <h1>two</h1> 
 
</div> 
 
<div class = "three"> 
 
    <h1>three</h1> 
 
</div>

Answer 2

.one:hover + .two, .one:hover + .three{ 
    opacity:1; 
} 

Answer 3

的+组合子同时连接两个连续的兄弟姐妹。为了达到两步之遥的兄弟姐妹，您将相应地需要使用+两次，一次为您跨越的每个兄弟姐妹。

结果选择器是.one:hover + .two + .three。

.two, .three { 
 
    opacity: 0; 
 
} 
 
.one:hover + .two, 
 
.one:hover + .two + .three { 
 
    opacity: 1; 
 
}

<div class="one"><h1>one</h1></div> 
 
<div class="two"><h1>two</h1></div> 
 
<div class="three"><h1>three</h1></div>

您还可以使用~组合子，但是这需要.one，.two和.three是父元素的唯一孩子（或者至少后两个是唯一的实例其种类为.one），在这种情况下，您最好将其缩短为.one:hover ~ div，而不是单独针对每个兄弟姐妹。使用+组合器更保守并且不易出错。