How to change link color when hovering over a link in HTML

Updated: 12/30/2019 by Computer Hope

Changing the link color when the visitor hovers over a link helps indicate what is clickable on your web page or blog. Make your pages link color change, implement the below code into your <head></head> portion of your HTML (HyperText Markup Language) or CSS (Cascading Style Sheets) code for your web page.

The example below is how to change the link properties of your web page in CSS. To change the link color when moving the 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 is the color that the text changes to when the mouse is over the link. In this example, the link changes to a blue color when a mouse cursor is hovering over a link.

Tip

This CSS code can also be inserted in an external CSS file to load on every web page.