html - 如何同时影响下一个元素和之后的元素

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>