How To Create A Color-Changing Link in CSS (For Navigation Menus or Anything Else)

It’s common in UX design to have web page elements react in some way to user interaction. For example, have a link change colour when the user mouses over it.

This can be achieved using Javascript in the DOM, but equally, it can be done with CSS.

So assume this is the following link code. An a tag inside a nav div.

<div id="nav">
<a href="">link</a>
</div><!-- // nav -->

To style this normally, the CSS would be as follows:

#nav a {color: black;}

And to style the link, when a user hovers over it, we would do:

#nav a:hover {color: blue}

Copyright 2021. All Rights Reserved. Adam Patel