Interactive Pseudo-classes
These pseudo-classes style elements according to how the user interacts with them.
Pseudo-classes Used on Links
Links commonly rely on four pseudo-classes: :link for unvisited links, :visited for visited ones, :hover for a mouse over the link, and :active for an activated link.
Example
The link color here depends on the link's state.
Note: For a:hover to work, it MUST follow a:link and a:visited in the CSS. For a:active to work, it MUST follow a:hover. Case does not matter in pseudo-class names.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Pseudo-classes</title>
<style>
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
</style>
</head>
<body>
<h2>Styling Links with Pseudo-classes</h2>
<p><a href="https://prompt-cookbook.com">This is a link</a></p>
<p><strong>Note:</strong> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><strong>Note:</strong> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
</body>
</html>
:hover on <div>
Links are not the only elements that respond to :hover; other elements can use it too.
Example
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover on Div</title>
<style>
div {
background-color: green;
color: white;
padding: 25px;
text-align: center;
}
div:hover {
background-color: blue;
}
</style>
</head>
<body>
<h2>:hover on a div element</h2>
<div>Mouse Over Me</div>
</body>
</html>
:focus on <input>
An element that receives focus, for instance an input field a user clicks on or tabs to, can be styled through the :focus pseudo-class.
Example
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Focus on Input</title>
<style>
input:focus {
background-color: yellow;
}
</style>
</head>
<body>
<h2>:focus on an input field</h2>
<form>
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last Name:</label><br>
<input type="text" id="lname" name="lname">
</form>
</body>
</html>
Pseudo-classes and HTML Classes
Combining pseudo-classes with HTML classes is easy.
Example
Here :hover applies only to the <a> element with class "highlight".
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo-class with HTML Class</title>
<style>
a.highlight:hover {
color: #ff0000;
}
</style>
</head>
<body>
<h2>Pseudo-classes and HTML Classes</h2>
<p><a href="#">This is a regular link</a></p>
<p><a class="highlight" href="#">This link has the "highlight" class - hover over me!</a></p>
</body>
</html>
Simple Tooltip Hover
A simple tooltip effect needs only :hover: a hidden element appears when the user hovers over its parent.
Example
A <p> element shows up, like a tooltip, on hovering over a <div> element.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Tooltip Hover</title>
<style>
p.tooltip {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p.tooltip {
display: block;
}
</style>
</head>
<body>
<h2>Simple Tooltip Hover</h2>
<div>Hover over me to show the p element.
<p class="tooltip">I am shown when you hover over the div!</p>
</div>
</body>
</html>