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?
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.
SawyeraAuthor Commented:
Perfect, and in great detail. Thank you!
Glad I could help!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.