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

Question

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

JSFiddle

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我希望有这样的事情：

.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 + .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，而不是分别针对每个兄弟姐妹。使用+组合器更加保守，不易出错。

Answer 3

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