Is there a jQuery overlap connection technique?

Hello,

I had an idea for a website navigation and I was wondering how I would do it with jQuery. Basically what would happen is there'd be a small background div, set below text with a higher z-index. The text is normally white, contrasting the background, but when the white background div is behind the text, the text is black. I have attached an image to give an extra explanation. So what I want is when you hover over a different text, the background of that text will slide down, and the previous one will slide up. The issue is when it slides onto a different one, it's white text on a white background. How do I make the text go black when there is a "collision", or overlap between the two? Any help is very much appreciate.

Thank you,
- Sawyer
Picture-9.jpg