There are four basic states for links in HTML: a:link, a:visited, a:hover, a:active, and sometimes a:focus is also used. You can set styles for each state through CSS. The order is recommended to be arranged according to LVHA (Link → Visited → Hover → Active) to avoid overwriting problems; in order to make the link easier to identify and not abrupt, high-contrast but non-glazing colors should be used, appropriately retain or replace the underscore, and optimize the click area on the mobile terminal; in actual development, attention should be paid to setting the visited status, avoiding the same color as the text, and testing the hover effect at different screen sizes, etc., to improve the user experience.

Links in web pages will present different styles under different states, such as default state, hover state, clicked state, etc. To make these states look both beautiful and clear, we usually style each state individually through CSS.

Here are some common practices and suggestions:

What are the basic link status?

There are several basic states (pseudo-classes) for links in HTML, which are:

• a:link : Unvisible link
• a:visited : link that has been visited
• a:hover : link when hovering
• a:active : The link being clicked

Sometimes you may also use a:focus , especially in barrier-free design, which allows keyboard users to see the focus state.

How to set the style of each state separately?

You can write CSS styles separately for each state. For example:

 a:link {
  color: blue;
  text-decoration: none;
}

a: visited {
  color: purple;
}

a:hover {
  color: red;
  text-decoration: underline;
}

a:active {
  color: orange;
}

After setting this way, the color and effect of the link in different states will change. However, pay attention to the order: it is usually recommended to write in the order of LVHA (Link → Visited → Hover → Active), otherwise some styles may be overwritten.

How to make links easier to identify without being abrupt?

The purpose of the link is to let the user know that they can click, so make sure it is different from other text. But it should not be too fancy, as it affects the reading experience.

Here are a few practical suggestions:

• Use colors with higher contrast, but avoid overly harsh color combinations.
• You don’t have to add an underline, but if you remove the underline, you must ensure that the color is obvious enough.
• Hover and click status can change the details slightly, such as darker colors or slightly animation.
• On the mobile terminal, consider increasing the size of the click area to improve operability.

Points that are easy to ignore in actual development

• Don't forget the visited status : Many people only set link and hover, ignoring visited, which will make users not know which links have been viewed.
• Avoid using the same colors to give text and links : Especially for users with poor vision, it is difficult to distinguish.
• Test performance under different screen sizes : On mobile phones, the hover effect is sometimes not very sensitive, and additional treatment may be considered.

Basically that's it. Although setting the link style may seem simple, if you don't pay attention to details, it may affect the user experience.

The above is the detailed content of How to style links differently for different states?. For more information, please follow other related articles on the PHP Chinese website!