CODEWITHSUNDEEP
htmlcsscss-selectors
Jacob Proctor
Jacob Proctor

Reputation: 27

How to affect both the next element and the element after

This is presumably quite easy to achieve, but I can't figure out how to do it. I want to, when you hover over the first element, change the opacity of the second and third (make them appear).

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>

I would then like to have something like this:

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

Upvotes: 1

Views: 119

Answers (3)

BoltClock
BoltClock

Reputation: 723498

The + combinator connects two consecutive siblings at a time. In order to reach a sibling that is two steps away, you will accordingly need to use + twice, once for each sibling that you step across.

The resulting selector is .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>

You can also use the ~ combinator but this requires that .one, .two and .three be the only children of the parent element (or at least that the latter two be the only instances of their kind after .one), in which case you might as well shorten it to .one:hover ~ div rather than target each following sibling separately. Using + combinators is more conservative and less error-prone.

Upvotes: 1

sergdenisov
sergdenisov

Reputation: 8572

You could use 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>

Upvotes: 1

Ankita
Ankita

Reputation: 623

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

Upvotes: -1

Related Questions