:link
The :link pseudo-selector targets all anchor (<a>) elements that have an href attribute and have not yet been visited by the user. Use this selector to style hyperlinks that the user has not clicked on yet. This is typically used to set the initial appearance of links on a page.
Example
a:link { color: blue; text-decoration: none; }
All unvisited links will be blue with no underline.
:visited
The :visited pseudo-selector targets anchor (<a>) elements that the user has already clicked on and visited. Browsers store the URLs of visited links in history and apply the :visited styles accordingly. Use this selector to style links differently once the user has visited them, often to provide a visual clue that the link has been explored.
Example
a:visited { color: purple; }
:hover
The :hover pseudo-selector targets an element when the user hovers over it with the mouse cursor. This selector is commonly used to change the appearance of elements (especially links) to indicate interactivity. Use this selector to provide visual feedback when users hover over a link, making the interface feel more interactive and responsive.
Example
a:hover { color: red; text-decoration: underline; }
When the user hovers over any link, it will turn red and become underlined.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hyperlink Pseudo-selectors Example</title> <link rel="stylesheet" href="../../css/selectors/hyperlink-pseudo-selectors.css"> </head> <body> <h1>Hyperlink Pseudo-selectors Example</h1> <p> <a href="https://self-learning-java-tutorial.blogspot.com/">Visit Java Tutorial</a> </p> <p> <a href="https://www.openai.com">Visit OpenAI</a> </p> </body> </html>
hyperlink-pseudo-selectors.css
/* Unvisited link */ a:link { color: blue; text-decoration: none; } /* Visited link */ a:visited { color: purple; } /* Link when hovered over */ a:hover { color: red; text-decoration: underline; }
Open the page ‘hyperlink-pseudo-selectors.html’ in browser, you can see below kind of screen.
Hover the mouse on ‘Visit Java Tutorial’ link, you can see that the link background is changed to red.
Click on the ‘Visit Java Tutorial’ link and come back to the same page, you can see that the link color is changed to purple.
Previous Next Home
No comments:
Post a Comment