Changing link color when moving mouse over link in HTML

Updated: 04/26/2017 by Computer Hope

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.

The example below is how to change the link properties of your web page in CSS. 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 - The hover option 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 codes page for a full listing of colors and their associated color codes.