Changing link color when moving mouse over link in HTML

Web page link color changeChanging the link color when the visitor hovers over a link is a great method to help indicate what is clickable on your web page or blog. To make your pages link color change implement the below code into your <head></head> portion of your HTML or in your CSS code for your web page. This is a full example of changing the link properties of your web page. If you want to just change the link color when moving a mouse over a link you only need the A:hover line.

<style type="text/css">
<!--
A:link { COLOR: black; TEXT-DECORATION: none; font-weight: normal }
A:visited { COLOR: black; TEXT-DECORATION: none; font-weight: normal }
A:active { COLOR: black; TEXT-DECORATION: none }
A:hover { COLOR: blue; TEXT-DECORATION: none; font-weight: none }
-->
</style>

hover - This is the color that the text is going to be changed to when the mouse is over the link. In this example the link will change to a blue color when a mouse cursor is hovering over a link.

Tip: This CSS code can also be inserted into an external CSS file that can be loaded from every web page.

Additional information

  • See the onMouse page for further examples of how to change images when moving a mouse over the image.
  • See our HTML color code page for a full listing of colors and their associated color codes.