How to make links change color when mouse rolls over?

  • 1
  • Question
  • Updated 5 years ago
  • Answered
How do I make the links in the body of my website change colors when the mouse rolls over them?

I figured out how to remove the underline from each link (I didn't like those), but as they are right now, people who view my website cannot tell the difference between the links from the rest of the regular written text.

Any guidance you can offer me will be greatly appreciated. Thanks!
Photo of Grant Bowler

Grant Bowler

  • 6 Posts
  • 0 Reply Likes

Posted 5 years ago

  • 1
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
Hello Grant,

The following 4 lines of code, if you add them to your css they will do the following:
First line : set the link color to be different than the rest of the font on your page.
2nd line: set the link color to change when the mouse hovers over it.
3rd line: set the color to change when the link reference is the same page as the page that is currently being viewed.
4th line: if the user has already visited that link reference, the link will be the specified color.

The color reference can be the color name (as shown below) or it's code such as color:#FF0000


a {color: purple;}
a:hover {color: red;}
a:active {color:blue;}
a:visited {color: green;}
Photo of Grant Bowler

Grant Bowler

  • 6 Posts
  • 0 Reply Likes
Thank you very much for responding and for these lines of code. I tried plugging in the 2nd line a couple of different places in my CSS, but the other problem I have is I don't really know where to insert the code to make it work.

I plan to implement the 4th line too...once I know where to insert the coding.
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
To you have access to the css settings of your site? To access it, click the Site tab at the top, click the content button and then click site css. On the window that open, on the left side column called Site CSS Overrides, paste the css code.

If you don't have access to the css settings for your site, add a HTML widget to each of your pages and in the HTML widget put the following code:


<style type="text/css">
a {color: purple;}
a:hover {color: red;}
a:active {color:blue;}
a:visited {color: green;}
</style>
Photo of Grant Bowler

Grant Bowler

  • 6 Posts
  • 0 Reply Likes
I see what I've done now. Yep, I pasted the 2nd line in the site column called Site CSS Override, like you said. I do see now it is working for all of the links on my website that have the little underneath line on them. However, the links where I cleared away the little underneath line (which is the majority of links on my website), the color changing effect is not working on them when I roll the mouse over.

The functionality of the links all work fine when I click on them, but I'm just unable to get the color changing effect with the mouse to work on those ones. Does that make sense?--hard to explain in typing.

So I guess the question now is: Does the little underneath line need to be showing on the links in order for the color change to work? Because I can put them back on, but I just think they look tacky.

P.S. thank you for helping me.
Photo of Grant Bowler

Grant Bowler

  • 6 Posts
  • 0 Reply Likes
Actually, the color change is working also on some of the links without underneath lines too, but not all of them. I'm really confused.
Photo of Grant Bowler

Grant Bowler

  • 6 Posts
  • 0 Reply Likes
In the places where I've used a Custom Panel widget, and then put a Text widget inside of it containing links, those are the ones not changing colors. The others seem to mostly be working with the exception of one that just isn't working.
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
If it isn't working, it because there is conflicting code in another location that is taking precedence over the css code that you are putting in. If you add !important to the end of the code like it should give it priority. The following is an example:


a:hover {color: red !important; text-decoration:none !important; }


The text-decoration:none will make it so it is not underlined.

Another option is to put the style statement right with the line of text in the widget box. This would give it absolute precedence of any conflicting code located elsewhere. For example if the code normally would say:


[a href="PageTwo.php"]Page Two Link [/a]


Instead you could write:

[a style="color: red; text-decoration:none" href="PageTwo.php"]Page Two Link [/a]


Replace the [ ] brackets with < and >. The site would not allow me to post with the < brackets for the link.
Photo of Grant Bowler

Grant Bowler

  • 6 Posts
  • 0 Reply Likes
Great, they're all working now! You're a genius! :-) Thank you for your help.