0

I "need" to target the other sibling of each of two elements (actually children of siblings) on :hover. I can get the code block below to work, but I cannot get it to work in the reverse. I understand there is no designated method of targeting like this: ".element2:hover + .element1", but I did find this (Is there a "previous sibling" CSS selector?) which had some creative solutions including RTL and some tricky :nth-child ideas. However, I still couldn't see a way to go BOTH ways, but rather just switching directions (I need both).

MARKUP: 

<div class="element1">Element 1</div>
<div class="element2">
    <p class="child">
        <span class="grandchild">Element 2</span>
    </p>
    <p class="child2"></p>
</div>
<div class="element3">Element 3</div>

CSS:

.element1:hover + .element2 .child .grandchild { background-color: red; }

https://jsfiddle.net/macwise/6u3nj18m/

EDIT: I added a third root child element (.element3) to reflect the real-world case I'm working with.

Update: perhaps my language of "previous sibling" was vague and therefore misconstrued as "parent" (Is there a CSS parent selector?). Parent targeting would probably offer a satisfactory solution too, but I am technically needing to target "one sibling of a parent which comes before another sibling of that same parent." It's simpler than it sounds. :) Hope that clears things up.

Community
  • 1
  • 1
macwise
  • 1
  • 2
  • Thanks Trix! I updated to clarify that while that case could offer a solution, it is not the same issue. – macwise Feb 07 '16 at 03:26
  • That thread discusses the either/or scenario. I am looking for the "cake and eat it" scenario, or the best of both worlds. As explained in my post, that thread only wants to reverse the order so `.element2` triggers `.element1`. I need that AND `.element1` to trigger `.element2`, AND I need it to trigger different styles for each element. Hope that makes sense. – macwise Feb 07 '16 at 07:33

1 Answers1

0

you could catch hover from parent and trigger it once you hover a child.

then apply bg to all divs, but the one hovered :

body div {
    pointer-events: auto;
}
body {
    pointer-events: none;
}
body:hover div {
    background: red;
}
body:hover div:hover {
    background: none;
}
<div class="element1">Element 1</div>
<div class="element2">
  <p class="child">
    <span class="grandchild">Element 2</span>
  </p>
  <p class="child2"></p>
</div>

But, this is for the fun only, you should use JavaScript for this.

Markus Safar
  • 6,324
  • 5
  • 28
  • 44
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • Thanks for the answer. Hmmm...I have a third element (updated the post to reflect that), but perhaps your answer combined with a :not() pseudo-element to always exclude the third non-related child might work? – macwise Feb 07 '16 at 02:02
  • I got this far: https://jsfiddle.net/macwise/5vc698fw/2/ But I need to have a different declaration on each child (font color in one, background in the other) – macwise Feb 07 '16 at 02:14
  • Bah. Alas, element three contains links, too. :( I'm quickly learning how not to ask a good SO question. – macwise Feb 07 '16 at 02:20