How to change the color of the text when a user hovers over a link in CSS

Arif Billah Babu

          

  CSS



Image not found!!

You can change the color of text when a user hovers over a link using CSS. Here's an example:

css
/* Normal state styles */
a {
  color: #0077cc; /* Set the default color for the link */
  text-decoration: none; /* Remove the underline, if desired */
}

/* Hover state styles */
a:hover {
  color: #ff5500; /* Set the color for the link when hovered */
}

In this example:

  • The a selector targets the normal state of the link and sets the default color (#0077cc in this case) and removes the underline using text-decoration: none; (optional).
  • The a:hover selector targets the link when it is being hovered over and sets a different color (#ff5500 in this case).

You can adjust the color values to suit your design preferences. This CSS will apply to all links on your page. If you want to target specific links, you can use more specific selectors, such as classes or IDs. For example:

css
/* Normal state styles for a link with class "custom-link" */
.custom-link {
  color: #0077cc;
  text-decoration: none;
}

/* Hover state styles for the same link */
.custom-link:hover {
  color: #ff5500;
}

Remember to include this CSS within your HTML file or link it externally in your webpage for it to take effect.

Category List