Is there a jQuery overlap connection technique?


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
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

You can likely achieve this by having a single javascript+jquery function that listens for a click event (based on an element id or class for example) and performs your transition effect. If you store that clicked id in a temporary variable, future clicks on other buttons would trigger the effect on both the current item being clicked, as well as the element with this temporary stored id (so the current element becomes white bg with black text, and the stored variable gets the opposite effect applied - each time the temporary id would be updated with that most recent element clicked).

You'd want to of course check to see that a previous was set, as the first time the page loads they wouldn't have clicked a previous button.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SawyeraAuthor Commented:
Perfect, and in great detail. Thank you!
Glad I could help!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.