Change hover links

Peggy

Well-known member
When you hover over a link on the navbar currently, a background color appears.
I'd like to change this behavior if possible. I've tried to figure it out, but can't get it to work.

I'd like to get rid of the background color that appears upon hovering, and have the text change color instead. (See screenie).
Is this possible? If so, how?

hover.webp
Thanks!
 
Add this to EXTRA.css:

Code:
/* Change navigation tab hover colour */
.navTabs .navTab.PopupClosed:hover {
background-color: @secondaryDark;
color: @primaryLight;
}

Change the colours to suit.
 
In that case try this:
Code:
.navTabs .navTab.selected .tabLinks a:hover, .navTabs .navTab.selected .tabLinks a:focus {
background-color: @secondaryDark;
color: @primaryLight;
}
 
Unfortunately there's still a background color on hovering, just a different color now, lol.
How do I get rid of that background color?

I did:

Code:
.navTabs .navTab.selected .tabLinks a:hover, .navTabs .navTab.selected .tabLinks a:focus {
background-color: none;
color: @primaryLight;
}

didn't work.
 

Unfortunately there's still a background color on hovering, just a different color now, lol.
How do I get rid of that background color?


Peggy,

Go to Appeareance -> Style Properties -> Header and Navigation -> Selected Tabs Link Hover State

Then remove the background effects, should work for you.
 
Peggy,

Go to Appeareance -> Style Properties -> Header and Navigation -> Selected Tabs Link Hover State

Then remove the background effects, should work for you.
THis isn't for the tabs tho hun, it's for the links below them i.e. what's new, watched threads, etc.
 
OK! I changed none to transparent, and that's alot better, but, there's still a noticeable border around it.
How to get rid of that?
Add a border property to the code above, the same colour as the background.

border: 1 px solid @whatever;

Set the background colour in the original code to the same colour as the navigation bar and it will appear identical on hover.
 
I have this now which is working great, except there's still a border...
Code:
.navTabs .navTab.selected .tabLinks a:hover, .navTabs .navTab.selected .tabLinks a:focus {
background-color: transparent;
color: #000000;
}
 
Add a border property to the code above, the same colour as the background.

border: 1 px solid @whatever;

Set the background colour in the original code to the same colour as the navigation bar and it will appear identical on hover.

OK! ummmm what is that strip called? :)
 
Try this:

Code:
.navTabs .navTab.selected .tabLinks a:hover, .navTabs .navTab.selected .tabLinks a:focus {
background-color: transparent;
border: transparent;
color: #000000;
}
 
Top Bottom