CSS target element 2 on 1:hover and element 1 on 2:hover -


this question has answer here:

i "need" target other sibling of each of 2 elements (actually children of siblings) on :hover. can code block below work, cannot work in reverse. understand there no designated method of targeting this: ".element2:hover + .element1", did find (is there "previous sibling" css selector?) had creative solutions including rtl , tricky :nth-child ideas. however, still couldn't see way go both ways, rather 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: added third root child element (.element3) reflect real-world case i'm working with.

update: perhaps language of "previous sibling" vague , therefore misconstrued "parent" (is there css parent selector?). parent targeting offer satisfactory solution too, technically needing target "one sibling of parent comes before sibling of same parent." it's simpler sounds. :) hope clears things up.

you catch hover parent , trigger once hover child.

then apply bg divs, 1 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, fun only, should use javascript this.


Comments

Post a Comment