Link transition hovered

Support
#1

Hello,

I was trying to implement this little bit of CSS to make a nice transition when a link is hovered:

a {
  transition: color .4s;
  color: #265C83;
}
a:link,
a:visited { color: #265C83; }
a:hover   { color: #7FDBFF; }
a:active  {
  transition: color .3s;
  color: #007BE6;
}
.link { text-decoration: none; }

I placed the code in the global CSS, but unfortunately doesn’t work.
Can you point me in the right direction?

Thanks

#2

Hey Fabio,

The code you are trying should be working. Perhaps there is a CSS error in the code you currently have right now. To verify that, please copy all the codes that are in the Global CSS and paste it here.

It should provide some information if there are any CSS error that is causing the issue that you have to fix so that the CSS codes will work.

Hope this helps.

#3

Thank you for let me know about CSS Lint!
I was able to solve the problem, there was a previous line of code without 1 error that was preventing the thing to work.
I have a question though: I forgot that the code I wrote is also targeting the entry title of my posts in my blog page, haw can I make that targeting only links that I insert manually inside a text?

Is this a good solution?

a.link {
  transition: color .4s;
  color: #265C83;
}
a.link:link,
a.link:visited { color: #265C83; }
a.link:hover   { color: #7FDBFF; }
a.link:active  {
  transition: color .3s;
  color: #007BE6;
}
.link { text-decoration: none; }

Basically I added a Class.

Have a nice day!

#4

Hello Fabio,

Thank you for the clarifications.

If you are targeting the links inside the page/post contents, then perhaps you can use this code:

.entry-content a.link {
  transition: color .4s;
  color: #265C83;
}
.entry-content a.link:link,
.entry-content a.link:visited { color: #265C83; }
.entry-content a.link:hover   { color: #7FDBFF; }
.entry-content a.link:active  {
  transition: color .3s;
  color: #007BE6;
}
.entry-content .link { text-decoration: none; }

And if you are using Pro Editor and made the links inside a text element, then this code will help:

.x-text:not(.x-text-headline) a.link {
  transition: color .4s;
  color: #265C83;
}
.x-text:not(.x-text-headline) a.link:link,
.x-text:not(.x-text-headline) a.link:visited { color: #265C83; }
.x-text:not(.x-text-headline)  a.link:hover   { color: #7FDBFF; }
.x-text:not(.x-text-headline)  a.link:active  {
  transition: color .3s;
  color: #007BE6;
}
.x-text:not(.x-text-headline)  .link { text-decoration: none; }

We would love to know if this has worked for you. Thank you.

#5

Yep, the second bit of code that you post works,

Thank you very much!

#6

You’re always welcome Fabio.

Cheers!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.