How to change hover color linked list or any links?

Hi, guys, I am struggling to change the hover color of the links. How can I change links color and hover colors on the linked list or any links?

Actually, I have 2 main colors for the links all over the website. One of them for the link and one of them for hover. How can I add these two colors all over the website? (Links, mail links, etc)

The hover color for the links are based off of your chosen link color. You can set them to be lighter or darker than the main link color in the Control Center stack. Foundry does not set hovered link colors to a separate color.

1 Like

is it not possible with the CSS?

You can definitely add your own custom CSS to the page in the Page Inspector’s Custom CSS field to target links and their hover states.

1 Like

is the link must be inside the HTML stack for giving CSS?

No, it does not need to be inside an HTML stack.

If you want to post a link to an page you’re working one and details on what you’d like changed (along with what you’d like to stay as is) and what color you’d like it to be, I’m sure a few of us would help with the CSS you’d need.

Here it my links on my websites; these are linked list as yo can see. Already custom color I added it but I don’t know how to add them to hover color in CSS; I want to add a hover color these phone numbers and the emails.

Screen Shot 2019-12-24 at 18.37.06

I thought giving a CSS class these linked list and add them to hover color but I am not sure this is the correct way?

Screen Shot 2019-12-24 at 18.41.02

Can you publish a test page somewhere and send a link to a live page?

Don’t now how to do that? But here my full page; you can look see the links on the ‘ekibimiz’ and iletisim’ page.

Ok, here’s my suggestion.

First, turn off the “Custom Links Color” in the Linked List settings and change each item’s Style back to “Use Control Center”. This makes it easier to customize the colors, since it’s no longer applying the “!important” directive to any of the link’s CSS.

Next, add the class my-link-color in the HTML CSS classes field on the Linked List stack.

Finally, paste this code in either the site-wide of page specific CSS area. Change the color codes for the colors you want.

/* Set Custom Link Colors */
/* main color */
.my-link-color a, .my-link-color a:visited {
    color: #66666;
/* hover color */
.my-link-color a:hover, .my-link-color a:focus, .my-link-color a:active {

Thanks to you I learned beautiful things today. Thank you again. :v:

But I have another question;

If I want to add a new class to the same item, should I separate it with a comma or just space or I can’t add a new class for the same item?

Screen Shot 2019-12-24 at 20.51.20

Screen Shot 2019-12-24 at 20.52.35

Separate them with a space.

If you want to do multiple changes, you could always use one class and change the color and font with the same CSS class.

For example use a class named “my-link”:

/* Custom Link Style */
/* main style */
.my-link a, .my-link a:visited {
    color: #66666;
	font-weight: bold;
/* hover changes */
.my-link a:hover, .my-link a:focus, .my-link a:active {

Using two classes or one should both work. I just want to make sure you know you can do multiple things with one class.

Also note that in the CSS above, you only need the font-weight on the base link. The hover state uses that plus any additional CSS included. The above CSS will keep the bold and just change the color on hover.


Thank you again. Now, we are changed all global link colors and links font weight. Alright. What if I want to change one link main color and hover color but we will keep this global settings also. Cause I missed one of my link. I didn’t add the same HTML classes for this link cause I used the same color of the background for hover global.

I will give a new HTML classes for this link and use the same CSS settings for this link but this time not inside the global CSS page inside the page CSS? is that correct?

I’m not 100% sure I followed what you’re trying to do.

Generally, if you want links to have two sets of CSS settings, you can use two different classes and just assign the appropriate class to the link. You can put the CSS code in either place. If you are going to use it on more than one page, then put it in the global area. If you’re only going to use it on one page, then the page’s CSS area is best.

If you wanted to change all the links, we could probably have done it by just changing the anchor tags (that’s technically what links are) globally as opposed to using a class that you had to apply everywhere as needed. I though you only wanted the links in those linked lists to be different. In the end, this way is fine, but it might have saved you a bit of work the other way.

1 Like

One last question. How can I change buttons hover color in form stack?

If you are using the standard Foundry form and only one form on the page, you can try this:

#submit:hover {
	background-color: red;
	border-color: red;

This is in the CSS for the Form stack.


It worked. But when used same style for visited it didn’t work WHY?

#submit:visited {
background-color: #647382;
border-color: #647382;

I don’t think the :visited pseudo class can be applied to buttons, only to links. Probably @elixirgraphics would know better than I do.

Edit: also probable that @DLH knows this.

1 Like

I’m not sure I follow what you’re trying to do. Form submit buttons are not visited like a link is. A submit button triggers the form but you don’t “visit” anywhere.

1 Like

I don’t think you’ll ever see a visited state on a form button. What issue are you seeing with the colors after using the CSS @dougmon provided?