Streaming live at 10am (PST)

Hover Over Text


#1

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.

Thanks,
Patrick


#2

Text to change to another word or color?


#3

Hi,
I want it to change to another word.

Cheers
Patrick


#4

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?


#5

Yes it’s a solid background


#6

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.


#7

Thank you so much. WIll give this a go

Cheers,

P