Hover Over Text

Hi All,
I have developed a navigation bar and I am wanting the text to change when I hover over the link.
So basically with no mouse over hovering it says “Home” when a mouse has hovered hovered i want that text to change.

If anyone could help me it would be much appreciated.


Text to change to another word or color?

I want it to change to another word.


You’ll need to use absolute positioning within your navbar to put a text box with the text you want it to change to underneath your link. Is your navbar a solid background?

Yes it’s a solid background

Then the easiest way is to use absolute positioning to put a text box with the no hover text behind the button. You’ll need to set position:relative on the parent container and set a z index value of the link thats on top to something higher than 0. Then make the actual button thats on top opacity 0 and change the hover state to opacity 100 and make sure the background is solid color the same as the background of the nav bar. It will act as a mask. You can also then change the transition if you want it to fade in. Hope that helps.

Thank you so much. WIll give this a go