0

I have the following structure:

<div>
   <div>
      DIV_1
   </div>
</div>
<div>
   <div>
      DIV_2
   </div>
</div>

I'm trying to change the width of DIV_1 when DIV_2 is hovered over. I've seen many solutions that involve setting a state and using onMouseEnter, onMouseLeave but that solution doesn't work well for my project.

I've seen how to solve this using css and was wondering how I can do the same thing with JSX styling?

Note: DIV_1 and DIV_2 do not share a direct parent. I need to be able to access either the parent of DIV_2 or DIV_2 itself from DIV_1.

yem
  • 529
  • 1
  • 6
  • 20
  • Does this answer your question? [Is there a "previous sibling" selector?](https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector) – possum Jan 08 '23 at 14:05
  • That duplicate has direct answers with examples to what you're trying to do. – possum Jan 08 '23 at 14:05
  • It helps explain a part of it, although there, all examples seem to have had the same parent. unless I missed one? here the actual divs are each in their own respective parent – yem Jan 08 '23 at 14:21
  • There is no such a thing as "no-parent" element in html. Your divs do have a parent, even if it be the body tag. – César Rodriguez Jan 08 '23 at 14:27
  • Sorry. I meant no shared direct parent. I now edited the question to make that more clear. – yem Jan 08 '23 at 14:28

0 Answers0